Can/How to use muistyled on a MUI component

uche ozor 0
Viewed 19
import * as React from 'react';
import { styled } from '@mui/system';

const MyComponent = styled('div')({
  color: 'darkslategray',
  backgroundColor: 'aliceblue',
  padding: 8,
  borderRadius: 4,
});

export default function BasicUsage() {
  return <MyComponent>Styled div</MyComponent>;
}

So you know mui styled function or whatevevr like above. Can you do it but instead of being a styled div it would instead be a styled mui component. I do not want to use makestyles or sx props if possible.

e.g

import * as React from 'react';
import { styled } from '@mui/system';
import Avatar from "@mui/material/Avatar";


const MyComponent = styled('Avatar')({
  color: 'darkslategray',
  backgroundColor: 'aliceblue',
  padding: 8,
  borderRadius: 4,
});

export default function BasicUsage() {
  return <MyComponent>Styled div</MyComponent>;
}
material-ui reactjs
1 Answers

You can wrap the MUI component with styled() utility without string quotes like this:

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

const MyAvatar = styled(Avatar)({
  color: "darkslategray",
  backgroundColor: "red",
  padding: 8,
  borderRadius: 4
});

export default function BasicUsage() {
  return <MyAvatar>Styled avatar</MyAvatar>;
}

You can take a look at this sandbox for a live working example.

Ahmet Emre Kılınç0
Related