Menu
I am trying to add a style to a list in React:
const listStyle = {
list-style-type: none, // Error
};
and then:
const Box = () => (
<ul style={listStyle}>
<li>one</li>
<li>two</li>
</ul>
);
But I get an unexpected token error. Is list-style-type not supported?
Even doing it inline gives an error:
<ul >
<li style={{list-style-type: "none"}}>One</li>
<li style={{color: "red"}}><Checkbox />Two</li>
</ul>
920
In react, we can use the style attribute to add a inline styles to the dom elements, but we need to pass the styles as a javascript object instead of css string. Note: The JavaScript object properties should be camelCased. Let’s see an example. Now, we are adding inline styles to the Post component.
The easiest choice: Inline styles. Not the full flexibility of CSS, but decent basic styling at top level specificity. Every React HTML element has a style property that allows an object with all your styling. Objects can look like this:
In React, inline styles are not specified as a string. The style attribute accepts a JavaScript object with camelCased properties. For example: margin-top -> marginTop , border-radius -> borderRadius , font-weight -> fontWeight , background-color -> backgroundColor
This is one of the interesting ways to add styling to the component. We can create an object containing styling for each component and then interpolate the style object to the HTML Element. Since the styling is bound to the JavaScript Object, the styles are dynamic. As soon as the object updates the styles are also updated.
Your problem is with name of the style properties, it should be in the camel case format:
<li style={{ listStyleType: "none" }}>One</li>
Documentation on inline styling in react is here.
113
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
