I read some articles like
Inline Styling with React
, but it seems that to write inline CSS, I have to convert the normal CSS names into camel case, like lineHeight.
But I just want to write CSS in the most normal way, like
style="line-hight: 1px".
Can I do it in React?
If not, I would say this design is really really bad...
Top comments (2)
Hello,
React is a JSX not HTML. Basically, a react file is a JavaScript, that is why you must use JavaScript syntaxes when using the inline style in React.
In pure HTML file, you can do:
`
But in React (a JavaScript file), you cannot do that as the '-' will be recognized by JavaScript as a Math operator, meaning you are trying to subtract 'color' from 'background', which will of course throw an error.
To avoid such occurrence, JavaScript use the camelCase approach, eliminating the need to use an hypen or 'minus'. So that
background-colorbecomesbackgroundColor`.If you are a big fan of writing pure CSS, you can use module css or styled components in React.
I hope this helps.
Thanks for the teaching me~
I would say Svelte is better in this aspect because it allows it.