Learn how to inline style JSX elements with CSS.
This is how inline styling looks with JSX syntax:
<h1 style={{fontSize: "24px"}}>Inline styled JSX</h1>How the same inline styling looks with HTML syntax:
<h1 style="font-size:24px">Inline styled HTML</h1>As you can tell, there’s quite a difference.
- JSX uses double curly braces
{{ }}to surround styling properies and values, in HTML it’s double quotes" ". - JSX uses camelCase syntax for property names (if they have more than one word), e.g.
fontSizeortextTransform. In HTML, multi-word properties uses hyphensfont-size,text-transform - JSX wraps quotes (double or single) around property values if they’re strings,
"24px", HTML doesn’t24px.
Inline HTML and JSX styling have one thing in common, properties and values are separated by a colon (:).
Good to know: if you pass numeric values (like 24) to your JSX properties, you don’t have to wrap them in quotes, as they will default to pixel values px. So if you don’t want to use px units, but instead %, rem, or something else, you need to define it the values as strings: "50%", "2rem", etc.
If you have multiple style declarations
If you have more than one inline style declaration in JSX, you separate each declaration with a comma:
<h1 style={{fontSize: "24px", textTransform: "uppercase"}}>Inline styled JSX</h1>In HTML you separate declarations with a semi colon:
<h1 style="font-size:24px;text-transform:uppercase">Inline styled HTML</h1>Note: In inline HTML styling you only need to add semi-colons ; to separate style declarations, the last declaration doesn’t require it, but it won’t change anything if you do.
