EN
React - how to style with embedded <style> element
2
points
In this article, we would like to show you how to style with embedded <style> element in React.
Below example presents the use of template literals (``) wrapped with curly braces ({}) inside <style> tag to create the style for our <div> element.
Practical example:
// ONLINE-RUNNER:browser;
// Note: Uncomment import lines during working with JSX Compiler.
// import React from 'react';
// import ReactDOM from 'react-dom';
const App = () => {
return (
<div>
My div
<style>{`
div {
background: lightblue;
border: solid;
border-color: blue;
}
`}
</style>
</div>
);
}
const root = document.querySelector('#root');
ReactDOM.render(<App />, root);