Inserting data into the style attribute from an object in React

CSS You can also add styles to elements using the style attribute. In this and the next few lessons, we'll look at ways to inline styling.

Now we will not include the styles.css file, but will pass the corresponding values ​​to the style attribute in the form of an object with styles for each tag, which we will write directly in the component file.

So, let's take our component without CSS styles, which we made in the last lesson:

App.jsfunction App() {
  return (
    <div>
      <p>text</p>
      <p>text</p>
      <p>text</p>
    </div>
  );
}

Let's create an object with CSS styles for the div in the App.js file before the return command in the class1 variable. Remember that the property names here are written in camelCase notation, and the property values ​​should be enclosed in quotes:

App.jsconst class1 = {
  width: '200px',
  border: '2px solid brown',
  padding: '10px',
  textAlign: 'center'
};

Now let's add the class2 object with styles for the first paragraph:

App.jsconst class2 = {
  color: 'orangered',
  fontWeight: 'bold'
}

Object class3 with styles for the second paragraph:

App.jsconst class3 = {
  fontStyle: 'italic',
  color: 'brown',
}

And finally class4 for the last one:

App.jsconst class4 = {
  backgroundColor: 'orange',
  fontWeight: 'bold',
  color: 'white',
}     

Now, to apply CSS classes to the component, we will use the style attribute. For the first paragraph, we had a variable class2, let's pass it as a value:

App.js<p style={class2}>text</p>

In a similar way, we will add styles from objects for the remaining tags.

As a result, the component code will look like this:

App.jsfunction App() {
  const class1 = {
    width: '200px',
    border: '2px solid brown',
    padding: '10px',
    textAlign: 'center',
  };

  const class2 = {
    color: 'orangered',
    fontWeight: 'bold',
  };

  const class3 = {
    fontStyle: 'italic',
    color: 'brown',
  };

  const class4 = {
    backgroundColor: 'orange',
    fontWeight: 'bold',
    color: 'white',
  };

  return (
    <div style={class1}>
      <p style={class2}>text</p>
      <p style={class3}>text</p>
      <p style={class4}>text</p>
    </div>
  );
}