Should i use object or css with react?

Question

i'm currently working on a small chat app , using reactJS an materialUI component library.

Material UI use a lot of objet to describe the style of our element (like the "sx" props).

I was wondering if i still should use css or shouhd i put my css into my component as an object (more like a vue component). here is an example with an object :

    import React from 'react'
import CameraAltIcon from '@mui/icons-material/CameraAlt'

const AvatarForm = ({setAvatar}) => {

  return (
    <Box sx={sx}>
        <label htmlFor="photo">
          <CameraAltIcon />
        </label>
        <input 
          type="file" accept="image/*" 
          id="photo"
          onChange={ e => setAvatar(e.target.files[0])}
          style={{display: "none"}}
        />
    </Box>
  )
}
    
export default AvatarForm


const sx = {
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  textAlign: "center",
}

Is it a good practice ? and why ?

Use CSS-in-JS: like styled-components or emotion

Terry
– Terry

2022-01-30 12:23:47 +00:00
Commented Jan 30, 2022 at 12:23 — Terry
– Terry, Commented Jan 30, 2022 at 12:23

Simon · Accepted Answer · 2022-01-30 11:54:47Z

2

The official React documentation says that, whilst using inline-styles is supported, using standard css classes in generally better for performance.

Thus, in your situation I would recommend sticking to the official docs.

answered Jan 30, 2022 at 11:54

Simon

1852 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

GiL Itzhaky · Accepted Answer · 2022-01-30 12:00:10Z

2

if you prefer your css inside your js files, there is a new way of using it all together which called styled-components. Its really nice and have cool features.

answered Jan 30, 2022 at 12:00

GiL Itzhaky

3041 silver badge6 bronze badges

1 Comment

Sonfaya Over a year ago

Thanks for the advice, i'll check it out !

Collectives™ on Stack Overflow

Should i use object or css with react?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related