DEV Community

Randy Rivera
Randy Rivera

Posted on

React: Introducing Inline StylesPassed

  • 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>
    );
  }
};
Enter fullscreen mode Exit fullscreen mode
  • We camelCase the fontSize. This is because React will not accept kebab-case keys in the style object.

Top comments (0)