React - Add Inline Styles in React

JavaScript
1

Tell us what’s happening:

Hello, I am learning React and trying to apply inline styles to a component using a style object. However, I am encountering errors, even though my code seems correct.

Here is the code I have:

class Colorful extends React.Component {
render() {
const styles = {
color: “purple”,
fontSize: “40px”,
border: “2px solid purple”
};

return (
  <div style={styles}>
    Style Me!
  </div>
);

}
}

Error:
[ReferenceError: styles is not defined]

Your code so far

class Colorful extends React.Component {
  render() {
    const styles = {
      color: "purple",
      fontSize: "40px", 
      border: "2px solid purple"
    };

    return (
      <div style={styles}>
        Style Me!
      </div>
    );
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Challenge Information:

React - Add Inline Styles in React

3

Hi there!

You have added the styles object assignment on the wrong place. It’s should be above the Component

1 Like