CODEWITHSUNDEEP
reactjsmaterial-ui
SDK
SDK

Reputation: 1508

How to reuse same styles across different elements in material ui - styled?

Here I am having two material UI icons and both of them carry the same styles. Because of mui-styled components. I am not able to reuse the style.


import { styled } from '@mui/material/styles';
import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';

const StyledExpandableKeyboardArrowDown = styled(KeyboardArrowDown)(({ theme }) => ({
  backgroundColor: theme.palette.primary.main,
  borderRadius: '50%',
  color: theme.palette.common.white,
  fontSize: '1rem'
}));

const StyledExpandableKeyboardArrowRight = styled(KeyboardArrowRight)(({ theme }) => ({
  backgroundColor: theme.palette.primary.main,
  borderRadius: '50%',
  color: theme.palette.common.white,
  fontSize: '1rem'
}));

In the above example, u see two different icons but the same style. Is there any way I can resue the style instead of creating two different mui styled components?

Upvotes: 1

Views: 1248

Answers (1)

Akis
Akis

Reputation: 2252

You can create a a more generic styled component:

const StyledExpandableKeyboardArrow = styled('div')(({ theme }) => ({
  backgroundColor: theme.palette.primary.main,
  borderRadius: '50%',
  color: theme.palette.common.white,
  fontSize: '1rem'
}));

Then use it like this:

<StyledExpandableKeyboardArrow as={KeyboardArrowRight} />
<StyledExpandableKeyboardArrow as={KeyboardArrowDown} />

Upvotes: 2

Related Questions