How to use multiple CSS classes with MUI 5 SX prop?

Question

Does anyone know how to use multiple CSS classes with MUI 5 SX prop? I created a base class that I want to use with my Box components but use a second class specifically for the text inside of the Box. Applying base class, such as sx={styles.baseBoxStyle} works but sx={styles.baseBoxStyle styles.customBoxFontStyle} returns an error. Full code snippet and sandbox provided below. Any assistance is greatly appreciated!

Sandbox: https://codesandbox.io/s/mui-5-styling-uqt9m?file=/pages/index.js

import * as React from "react";
import Box from "@mui/material/Box";

const styles = {
  baseBoxStyle: {
    backgroundColor: "red",
    borderRadius: "20px 20px 20px 20px",
    border: "1px solid black",
    maxWidth: "150px",
    margin: "20px",
    padding: "10px"
  },
  customBoxFontStyle: {
    color: "yellow",
    fontWeight: "bold"
  }
};

export default function Index() {
  return <Box sx={styles.baseBoxStyle styles.customBoxFontStyle}>This is a test</Box>;
}

Sandbox link: codesandbox.io/s/mui-5-styling-uqt9m?file=/pages/index.js — sybercoda
– sybercoda, Commented Nov 29, 2021 at 12:54
Hi, if I want to use theme in styles and pass it, how can I use it? — Milan Poudel
– Milan Poudel, Commented Jan 22, 2022 at 10:34

Aleksander · Accepted Answer · 2022-03-18 22:40:20Z

15

I had a similar problem and came up with this solution.

  <Box sx={[styles.baseBoxStyle, styles.customBoxFontStyle]}>
    This is a test
  </Box>

https://codesandbox.io/s/sweet-blackwell-oqp9ph?file=/src/App.js:416-517

edited Mar 18, 2022 at 22:40

answered Mar 18, 2022 at 22:34

Aleksander

1511 silver badge6 bronze badges

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

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

hamidreza nikoonia · Accepted Answer · 2022-08-09 11:58:13Z

11

If you want combine 2 calsses, and you get one of them as props you should work like this

const componnent = (styles) => {
 return ( 
  <ListItem
    sx={[
      {
        width: 'auto',
        textDecoration: 'underline',
      },
      ...(Array.isArray(styles) ? styles : [styles]),
    ]}
  /> 
 )
}

You cannot spread sx directly because SxProps (typeof sx) can be an array

answered Aug 9, 2022 at 11:58

hamidreza nikoonia

2,1752 gold badges24 silver badges31 bronze badges

Comments

MintWelsh · Accepted Answer · 2022-02-23 16:58:58Z

5

For a simple solution, can deconstruct the style objects and compile into one object.

<Box sx={{...styles.baseBoxStyle,...styles.customBoxFontStyle}}>This is a test</Box>

answered Feb 23, 2022 at 16:58

MintWelsh

1,2591 gold badge13 silver badges22 bronze badges

Comments

Wraithy · Accepted Answer · 2021-11-29 12:48:08Z

3

You can try to use classnames as its commonly used library, or you can just make string from these styles that you pass into sx sx={styles.baseBoxStyle+' '+styles.customBoxFontStyle}

answered Nov 29, 2021 at 12:48

Wraithy

2,0961 gold badge7 silver badges15 bronze badges

4 Comments

sybercoda Over a year ago

I just now tried the suggested on sx prop but it doesn't work as they are objects. codesandbox.io/s/mui-5-styling-uqt9m?file=/pages/index.js

Wraithy Over a year ago

oh sorry, i dont know why i thought, these are classes... but there you can try to combine these two objects: sx={{...styles.baseBoxStyle,...styles.customBoxFontStyle}}

sybercoda Over a year ago

Sorry Wraithy, that doesn't work either.

sybercoda Over a year ago

my apologizes. Your solution does indeed work. I confirmed this after consulting with another React developer who suggested the same. Not sure why it didn't work initially tested but I suspect I neglected to wrap it in additional curly brackets.

Viljami · Accepted Answer · 2023-03-03 12:45:47Z

With the following functions

import { SxProps, Theme } from "@mui/material/styles";

export const withSxProp = (
    sxProp: SxProps<Theme> | undefined,
    other: SxProps<Theme>
): SxProps<Theme> => {
    if (!sxProp) {
        return other;
    } else {
        return mergeSx(sxProp, other);
    }
};

export const mergeSx = (...sxProps: SxProps<Theme>[]): SxProps<Theme> => {
    return sxProps.reduce((prev, currentValue) => {
        return [
            ...(Array.isArray(prev) ? prev : [prev]),
            ...(Array.isArray(currentValue) ? currentValue : [currentValue]),
        ];
    }, [] as SxProps<Theme>);
};

Usage

class MyComponent = (parentSxProp: SxProps<Theme>) => {
    const sxChildDefault = {
       display: "flex"
    }
    const innerSx1 = {
        display: "flex"
    }
    const innerSx2 = {
        flexDirection: "column"
    }
    return <Box
       sx={withSxProp(parentSxProp, sxChildDefault)}
    >
        <Box
            sx={mergeSx(innerSx1, innerSx2)}
        />
    </Box>
}

Bielik · Accepted Answer · 2023-02-17 10:26:10Z

To build on Aleksander's answer, there is a section about merging sx in MUI official documentation.

import * as React from 'react';
import ListItem from '@mui/material/ListItem';
import FormLabel from '@mui/material/FormLabel';
import { SxProps, Theme } from '@mui/material/styles';

interface ListHeaderProps {
  children: React.ReactNode;
  sx?: SxProps<Theme>;
}

function ListHeader({ sx = [], children }: ListHeaderProps) {
  return (
    <ListItem
      sx={[
        {
          width: 'auto',
          textDecoration: 'underline',
        },
        // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
        ...(Array.isArray(sx) ? sx : [sx]),
      ]}
    >
      <FormLabel sx={{ color: 'inherit' }}>{children}</FormLabel>
    </ListItem>
  );
}

export default function PassingSxProp() {
  return (
    <ListHeader
      sx={(theme) => ({
        color: 'info.main',
        ...theme.typography.overline,
      })}
    >
      Header
    </ListHeader>
  );
}

1t1e1 · Accepted Answer · 2021-11-30 15:01:24Z

0

I think you cant use sx with classes. I have not seen any example in documentation.

answered Nov 30, 2021 at 15:01

1t1e1

3362 silver badges7 bronze badges

4 Comments

sybercoda Over a year ago

In this context I'm referring to JSS as classes, not traditional CSS class. In the example I provided in this post, sx={styles.baseBoxStyle} works without issue.

1t1e1 Over a year ago

I see. styles.baseBoxStyle is js object. It pretends just temporary constant. In these cases making a new object by destruction will work. I was confused you try to do similar way as makeStyles does.

sybercoda Over a year ago

I'm migrating from v4 to v5 and because I used makeStyles in v4, which is deprecated in v5, my goal was to not have to reformat all of my styling.

1t1e1 Over a year ago

Yeap. I am new to MUI. I have the same problem. All examples I find a references point are made with makeStyles in v4. I can use the legacy method for my works, it works but I am trying to figure out how should styles components in v5 way.

Collectives™ on Stack Overflow

How to use multiple CSS classes with MUI 5 SX prop?

7 Answers 7

1 Comment

Comments

Comments

4 Comments

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Comments

4 Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related