Menu
i'm studying about React but don't understand the JSX Styles. here code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="disp"></div>
<script type="text/babel">
var root = document.querySelector('#disp')
const cssStyle = {
'color': 'red',
'backgroud-color': '#fff0f0',
'font-size':'2em'
}
const scriptStyle = {
color: 'blue',
backgroundColor: '#fff0f0',
fontSize: '2em'
}
function getDOM() {
return (
<div>
<div style={scriptStyle}>
Look at the stars
</div>
<p stlye={cssStyle}>
Look how they shine for you
</p>
</div>
)
}
ReactDOM.render(getDOM(), root)
</script>
</body>
</html>Issue
scriptStyle is good but I can not see cssStyle normally. [object object] so how can I?
718
JSX gives us the convenience of combining HTML syntax and JavaScript under one file in React. However, our stylesheets always existed in a separate directory. With inline styles, you have to option to combine CSS syntax with JSX code.
Did you know that you can style a React component with raw CSS and no extra files? There are many ways to style a component in React, but some are more popular than others.
JSX stands for JavaScript syntax extension. It is a JavaScript extension that allows us to describe React's object tree using a syntax that resembles that of an HTML template. It is just an XML-like extension that allows us to write JavaScript that looks like markup and have it returned from a component.
In JSX, styles are provided as an object, with keys being camelCase instead of snakeCase. For instance background-color will be written as backgroundColor which is exactly how it is being provided in scriptStyle object and that is how it needs to to given to the style. Apart from it you also have a typo in style={cssStyle}
Working demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="disp"></div>
<script type="text/babel">
var root = document.querySelector('#disp')
const cssStyle = {
'color': 'red',
'backgroudColor': '#fff0f0',
'fontSize':'2em'
}
const scriptStyle = {
color: 'blue',
backgroundColor: '#fff0f0',
fontSize: '2em'
}
function getDOM() {
return (
<div>
<div style={scriptStyle}>
Look at the stars
</div>
<p style={cssStyle}>
Look how they shine for you
</p>
</div>
)
}
ReactDOM.render(getDOM(), root)
</script>
</body>
</html>Docs Link
147
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
