CODEWITHSUNDEEP
reactjsmaterial-uiemotion
btmorex
btmorex

Reputation: 496

In Material-UI v5, should I prefer the css prop over the sx prop or vice versa?

I believe these two props both use emotion under the hood and they seem to do much the same thing. I've been using the css prop because I prefer template tags and real css vs. javascript style names for css properties. Is there any reason to prefer one over the other given that they are basically interchangeable in terms of functionality?

Upvotes: 9

Views: 6236

Answers (2)

Binuralka
Binuralka

Reputation: 53

Emotion has a css method, see link. There is an option in css method to access the MUI theme object, as described here. The main advantage of css prop over sx, is that you can use scss styles for basic HTML elements, not only MUI components. I found this very promising as I don't want myself to lock inside MUI system that much.

In my codebase I use theme context a lot, because of light / dark palettes. For demonstration, this is my code.

import { Theme, css } from '@emotion/react'

 const getButtonStyles = (theme: Theme) =>
      css({
        width: 'max-content',
        height: 24,
        minWidth: '24px',
        padding: 0,
        color: theme.palette.mode === 'light' ? 
theme.palette.grey[800] : theme.palette.grey[200],
        '&>svg': {
          verticalAlign: 'middle',
        },
      })

  const Component = () => {
    return ( <button css={getButtonStyles}><svg ... /></button> 
  )}

To enable css prop in your repository, you need to add this line to tsconfig.json:

"compilerOptions": { "jsxImportSource": "@emotion/react" }

To connect emotion theme with MUI theme in order to enable typescript types & autocomplete, you need to create a file emotion.d.ts with this content:

import { Theme as MuiTheme } from '@mui/material'

declare module '@emotion/react' {
  export interface Theme extends MuiTheme {}
}

Upvotes: 0

Pandaiolo
Pandaiolo

Reputation: 11568

I read the page about the new MUI styles system here: https://next.material-ui.com/system/basics/

And it feels to me that the main difference is the following:

  1. The css prop lets you write something that looks like classic css, as you would do in actual CSS, or Less/Sass, or styled-components

  2. The sx prop gives access to the 'system' which is a set of utilities to quickly access props with shortcuts, as well as theme properties, which already existed before v5, but are now even easier to use.... after some learning curve...

The above documentation page gives a lot of examples.

Upvotes: 8

Related Questions