React: Introducing Inline StylesPassed
Randy Rivera
Posted on November 12, 2021
- Alrighty now, this lesson talks about styling your text/JSX elements.
- If you import styles from a stylesheet, it isn't much different at all. You apply a class to your JSX element using the
className
attribute, and apply styles to the class in your stylesheet. Another option is to apply inline styles, which are very common in ReactJS development. JSX elements use the
style
attribute, but you can't set the value to a string. Instead, you set it equal to a JavaScript object.Ex:
class ColorFul extends React.Component {
render() {
return (
<div style={{color: "black", fontSize: 17}}>PlayStation</div>
);
}
};
- We camelCase the fontSize. This is because React will not accept kebab-case keys in the style object.
π πͺ π
π©
Randy Rivera
Posted on November 12, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.