Should i use object or css with react?-CodePudding

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 ?

CodePudding user response：

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.

CodePudding user response：

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.