React: Introducing Inline StylesPassed

rthefounding

Randy Rivera

Posted on November 12, 2021

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.
πŸ’– πŸ’ͺ πŸ™… 🚩
rthefounding
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.

Related

Starting with ReactJS with fun
javascript Starting with ReactJS with fun

June 15, 2024

Intro to React Hooks
javascript Intro to React Hooks

April 29, 2024

Make React from scratch for fun
javascript Make React from scratch for fun

June 24, 2023