Can I change responsiveness inside the styled()? (MUI v5)

Question

Can I use some how inside the styled() the responsiveness of MUI? (xs, sm, md, lg, xl)

for example:

import { Button } from "@mui/material";
import { styled } from "@mui/system";

const MyButton = styled(Button)(({ theme }) => ({
    width: {xs:"10vw", sm:"25vw",...}
}));
export const Example = () => {
    return (
            <MyButton>Test</MyButton>
          )}

I know I can do it like this:

...

export const Example = () => {
    return(
        <Button sx={{
            height:"250px"
            width:{xs:100, sm:250, md:350...} }}>Test</Button>
    )};

• I don't want to split the style to inline and styled().

Answer 1

You can do this by leveraging the theme.breakpoints.up function for generating media queries for the different breakpoints. Below is a working example.

import Button from "@mui/material/Button";
import { styled } from "@mui/material/styles";

const MyButton = styled(Button)(({ theme }) => ({
  width: 150,
  [theme.breakpoints.up("sm")]: {
    width: 250
  },
  [theme.breakpoints.up("md")]: {
    width: 350
  },
  [theme.breakpoints.up("lg")]: {
    width: 450
  },
  [theme.breakpoints.up("xl")]: {
    width: 550
  }
}));
export default function Example() {
  return <MyButton variant="outlined">Test</MyButton>;
}

Related documentation: https://mui.com/material-ui/customization/breakpoints/#css-media-queries