React - Add Inline Styles in React

Tell us what’s happening:

tell me What i supposed to do since i already written the correct code.What should I do In order for this to work properly.

Your code so far

class Colorful extends React.Component {
  render() {
    // Define styles object
    const styles = {
      color: 'purple',
      fontSize: 40, 
      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/123.0.0.0 Safari/537.36 Edg/123.0.0.0

Challenge Information:

React - Add Inline Styles in React

Hello!

“styles” needs to be a global variable, declared outside of the class on top of the file.

Actually, you can declare styles within the render function, and there’s nothing inherently wrong with this approach. It’s same logic to defining styles directly within a DOM element’s style attribute. However, this lesson wnat to test the styles object before rendering, which is why it’s often suggested to define styles outside of the class component.

For more information, this article can be helpful in understanding different approaches to styling React components.

I know.

We are dealing with one of the hard-coded tasks that only accept one solution, as described in the premises.

1 Like