React - Add Inline Styles in React

JavaScript
1

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

2

Hello!

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

3

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.

4

I know.

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

1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.