CODEWITHSUNDEEP
reactjsmaterial-ui
uche ozor
uche ozor

Reputation: 35

Can/How to use muistyled on a MUI component

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>;
}

Upvotes: 0

Views: 36

Answers (1)

Ahmet Emre Kilinc
Ahmet Emre Kilinc

Reputation: 6895

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.

Upvotes: 1

Related Questions