Breaking News: Grepper is joining You.com. Read the official announcement!

how to pass props to styled components MUI5

Shakir Yasin answered on August 8, 2022 Popularity 9/10 Helpfulness 2/10

answer how to pass props to styled components MUI5

related pass custom props to styled components mui

how to pass props to styled components MUI5

Comment

const MyThemeComponent = styled('div', {
  // Configure which props should be forwarded on DOM
  shouldForwardProp: (prop) =>
    prop !== 'color' && prop !== 'variant' && prop !== 'sx',
  name: 'MyThemeComponent',
  slot: 'Root',
  // We are specifying here how the styleOverrides are being applied based on props
  overridesResolver: (props, styles) => [
    styles.root,
    props.color === 'primary' && styles.primary,
    props.color === 'secondary' && styles.secondary,
  ],
})<MyThemeComponentProps>(({ theme }) => ({
  backgroundColor: 'aliceblue',
  padding: theme.spacing(1),
}));

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: mui.com

Tags: javascript mui5 styled-components

Link to this answer
Share Copy Link

Contributed on Jan 04 2023

Shakir Yasin

0 Answers Avg Quality 2/10

Closely Related Answers

pass custom props to styled components mui

Comment

import { Box, Button } from "@mui/material";
import PropTypes from "prop-types";
import React from "react";
import { styled } from "@mui/material/styles";

const ButtonStyled = styled(Button, { shouldForwardProp: (props) => props !== "inactive" })(({ inactive, theme }) => ({
  backgroundColor: inactive ? theme.palette.primary[100] : theme.palette.primary[500]
}));

const CustomizedButton = ({ value, style, buttonBoxClass, inactive, ...other }) => {
  return (
    <Box style={style} className={buttonBoxClass}>
      <ButtonStyled inactive={inactive} centerRipple {...other}>
        {value}
      </ButtonStyled>
    </Box>
  );
};

export default CustomizedButton;

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Aug 08 2022

Hajar Mekamy

0 Answers Avg Quality 2/10

how to pass props to styled components MUI5

Contents

More Related Answers

how to pass props to styled components MUI5

Closely Related Answers

pass custom props to styled components mui

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.