Question 278448 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to avoid inline CSS in React

Is there a way around not using inline CSS in React when you have something as follows:

const stylesObj = { width: 10, height: 20 };
<div className="point-class"
  style={{
     width: stylesObj.width + "px",
     height: stylesObj.height + "px",
  }}
></div>
Tags:

2

Answers


  1. 0

    you can always change your global.css file

    .point-class {
 width: 10px,
 height: 10px
}

    or use this method to add css modules https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/

    Login or Signup to reply.
  2. 0

    You can use a more stable approach by defining the style object outside of the component render function.
    By defining the styles object outside the component, it remains the same between renders, ensuring that the style prop won’t trigger unnecessary re-renders.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search