With inline styles, the keys are literally the names of the CSS properties React understands: listStyle, background, etc. And the values are actual CSS rules.
With what Nanostyled calls "style props", the keys can be named whatever you like, and they're mapping to CSS class names from your functional CSS framework, not to CSS rules.
// inline, with actual CSS rules<buttonstyle={{background:'black',color:'white',borderRadius:'4px'}}>Inline</button>
// nanostyled, with CSS class names from tachyons.css<Buttonbg="bg-black"radius="br3"color="white">Nanostyled</Button>
// `bg` and `radius` are not CSS properties// `bg-black` and `br3` are not CSS rules// `color` and `white` happen to be valid CSS, but only by chance
You're seeing kebab-case in the browser debugging tools because the actual styling is being applied by whatever CSS framework you're using with nanostyled, which probably uses kebab-case for its class names.
The advantages Nanostyled has over inline styles are:
(1) You get all the power of whatever CSS framework you pair it with — media queries, hover effects, a design system, etc — but with a CSS-in-JS-like API.
(2) It's easier to keep your design consistent. Inline styles make you specify raw CSS properties in your styles, e.g. 12px font and #010101 color. Nanostyled has you use class names from your CSS framework instead, which means dark-gray ends up being the same color everywhere, instead of #010101 sometimes and #020202 other times, which is what tends to happen when an app lives for a long time or has multiple people working on it.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
With inline styles, the keys are literally the names of the CSS properties React understands:
listStyle,background, etc. And the values are actual CSS rules.With what Nanostyled calls "style props", the keys can be named whatever you like, and they're mapping to CSS class names from your functional CSS framework, not to CSS rules.
You're seeing kebab-case in the browser debugging tools because the actual styling is being applied by whatever CSS framework you're using with nanostyled, which probably uses kebab-case for its class names.
The advantages Nanostyled has over inline styles are:
(1) You get all the power of whatever CSS framework you pair it with — media queries, hover effects, a design system, etc — but with a CSS-in-JS-like API.
(2) It's easier to keep your design consistent. Inline styles make you specify raw CSS properties in your styles, e.g.
12pxfont and#010101color. Nanostyled has you use class names from your CSS framework instead, which meansdark-grayends up being the same color everywhere, instead of#010101sometimes and#020202other times, which is what tends to happen when an app lives for a long time or has multiple people working on it.