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:
xxxxxxxxxx1
// Note: Uncomment import lines during working with JSX Compiler.2
// import React from 'react';3
// import ReactDOM from 'react-dom';4
5
const App = () => {6
return (7
<div>8
My div9
<style>{`10
div {11
background: lightblue;12
border: solid;13
border-color: blue;14
}15
`}16
</style>17
</div>18
);19
}20
21
const root = document.querySelector('#root');22
ReactDOM.render(<App />, root);