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

pass custom props to styled components mui

Add Answer

Hajar Mekamy answered on August 8, 2022 Popularity 10/10 Helpfulness 5/10

answer pass custom props to styled components mui

related mui styled props typescript

related how to pass props to styled components MUI5

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 mui styled-components

Link to this answer
Share Copy Link

Contributed on Aug 08 2022

Hajar Mekamy

0 Answers Avg Quality 2/10

Closely Related Answers

mui styled props typescript

Comment

type InputProps = {
  width: number
}

const InputField = styled('input')<InputProps>(({ width }) => ({
  width: width
}));

Popularity 8/10 Helpfulness 4/10 Language typescript

Source: stackoverflow.com

Tags: mui typescript t

Link to this answer
Share Copy Link

Contributed on Mar 27 2023

Precious Pigeon

0 Answers Avg Quality 2/10

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 j

Link to this answer
Share Copy Link

Contributed on Jan 04 2023

Shakir Yasin

0 Answers Avg Quality 2/10

pass custom props to styled components mui

Contents

More Related Answers

pass custom props to styled components mui

Closely Related Answers

mui styled props typescript

how to pass props to styled components MUI5

Grepper

Documentation

Social

Legal

Contact

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