Leveraging class names to dynamically apply CSS styles to components based on their props value

Question

Leveraging class names to dynamically apply CSS styles to components based on their props value

In the process of developing a collection of reusable components, I have utilized material-ui and styled them with CSS. One specific requirement is to dynamically set the width of a component through a prop passed into a custom button.

My goal is to leverage classnames in order to combine the const root style defined for MyButton (for features like colors and icons) with a dynamic sizeStyle that can adjust based on the prop provided.

  const sizeStyle: JSON =  { minWidth: "300px !important"};

  //always apply the buttonstyle, only apply the size style if a width prop has been supplied
  const rootStyle: Object = classNames({
    buttonStyle: true,
    sizeStyle: props.width
  });

Despite my efforts, it seems that the style is not being applied to the first button on the page when a prop is passed through - even though the console indicates that both styles should be present.

View the sandbox here: https://codesandbox.io/s/css-styling-custom-muibutton-width-as-prop-36w4r

Thanks in advance!

javascript css reactjs material-ui class-names

Answer 1

Answer №1

To utilize the useStyles(props) function effectively, ensure that you pass props to it so that you can customize styles similar to using styled-components.

For more details, refer to the documentation: https://material-ui.com/styles/basics/#adapting-based-on-props

// eslint-disable-next-line flowtype/no-weak-types
const useStyles = makeStyles({
  root: {
    //    minWidth: "300px !important",
    color: "#565656",
    backgroundColor: "salmon",
    borderRadius: 2,
    textTransform: "none",
    fontFamily: "Arial",
    fontSize: 16,
    letterSpacing: "89%", //'0.09em',
    boxShadow:
      "0px 1px 5px 0px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 3px 1px -2px rgba(0,0,0,0.12)",
    "&:disabled": {
      color: "#565656",
      opacity: 0.3,
      backgroundColor: "#fbb900"
    },
    minWidth: props => `${props.width}px`,
  },
  label: {
    textTransform: "capitalize",
    display: "flex",
    whiteSpace: "nowrap"
  }
});

// eslint-disable-next-line flowtype/require-return-type
function MyButton(props) {
  const { children, ...others } = props;
  const classes = useStyles(props);

  return (
    <Button
      {...props}
      classes={{
        root: classes.root,
        label: classes.label
      }}
    >
      {children}
    </Button>
  );
}

Check out the modified version of this code on your sandbox: https://codesandbox.io/s/css-styling-custom-muibutton-width-as-prop-pcdgk?fontsize=14&hidenavigation=1&theme=dark

I hope this information is helpful!

Answer 2

To utilize the useStyles(props) function effectively, ensure that you pass props to it so that you can customize styles similar to using styled-components.

For more details, refer to the documentation: https://material-ui.com/styles/basics/#adapting-based-on-props

// eslint-disable-next-line flowtype/no-weak-types
const useStyles = makeStyles({
  root: {
    //    minWidth: "300px !important",
    color: "#565656",
    backgroundColor: "salmon",
    borderRadius: 2,
    textTransform: "none",
    fontFamily: "Arial",
    fontSize: 16,
    letterSpacing: "89%", //'0.09em',
    boxShadow:
      "0px 1px 5px 0px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 3px 1px -2px rgba(0,0,0,0.12)",
    "&:disabled": {
      color: "#565656",
      opacity: 0.3,
      backgroundColor: "#fbb900"
    },
    minWidth: props => `${props.width}px`,
  },
  label: {
    textTransform: "capitalize",
    display: "flex",
    whiteSpace: "nowrap"
  }
});

// eslint-disable-next-line flowtype/require-return-type
function MyButton(props) {
  const { children, ...others } = props;
  const classes = useStyles(props);

  return (
    <Button
      {...props}
      classes={{
        root: classes.root,
        label: classes.label
      }}
    >
      {children}
    </Button>
  );
}

Check out the modified version of this code on your sandbox: https://codesandbox.io/s/css-styling-custom-muibutton-width-as-prop-pcdgk?fontsize=14&hidenavigation=1&theme=dark

I hope this information is helpful!

Leveraging class names to dynamically apply CSS styles to components based on their props value

Answer №1

Similar questions

Encountering an error when attempting to start npm after creating a react app

Error: The server selection process has encountered an unexpected issue

Utilize the get method to showcase data in a material UI table for a React application

Monitoring Changes in an Array of Objects with Angular's $watch Feature

Connecting factors

Tips on targeting a node that is dynamically generated within a function and styling it externally

Adjust the size of H1, H2... tags based on their own specifications, rather than the surrounding element

I encountered a problem while integrating antd and moment.js in my React project

Is there a way to customize the default MuiCheckbox icon in theme.ts?

Creating a unique carousel design using only CSS in Bootstrap

Access the properties of a JSON object without specifying a key

Choosing the Right Alignment for Your Selection Box

`Toggle full screen navigation visibility upon clicking on a BrowserRouter Link`

Utilizing the document.createDocumentFragment() method along with innerHTML for manipulating a Document Object Model (

Is there a way to attach a ref to a Box component in material-ui using Typescript and React?

Creating a PHP JSON response that incorporates an HTML layout is a dynamic

Issue encountered with AJAX multiple image uploader

Should I include one of the dependencies' dependencies in my project, or should I directly install it into the root level of the project?

No testing detected, ending with code zero - NPM and YARN

Could you provide suggestions on how to update the content of an HTML tag within a Vue component?