How to use material ui sx props with a styles object?

user_16444194 0
Viewed 85

I have a styles object that would look like this:

styles = {
  color: "#333",
  fontSize: "16px",
};

I could apply styles to a Material UI component like below and it would work.

<Button sx={styles}>Example</Button>;

However, what if the Button component already had custom styles? How would I push my styles object then? For example, in this case:

<Button
  sx={{
    backgroundColor: "red",
    fontWeight: "700",
  }}
>
  Example
</Button>;

How would I add the styles object without overwriting the sx prop?

material-ui reactjs javascript
1 Answers

You could use the Spread syntax, like below. If you wanna know more about it, you can read on MDN's documentation.

What it's doing, in my words, is that it removes styles object's {}, and add it into the final object.

styles = {
  color: "#333",
  fontSize: "16px",
};

<Button
  sx={{
    backgroundColor: "red",
    fontWeight: "700",
    ...styles,
  }}
>
  Example
</Button>
user_152886410
Related