Material UI - is there any way to use className props in MUI Component

user_10686620 0
Viewed 1453

I am using React and Material-UI(MUI) in frontend.

In Button Component in MUI, there is className prop, so I don't know how to apply my style using class in style.css.

I can use id instead of className to apply the style, but I want to know if there's any way to do it.

Please don't tell me to modify to style in useStyles in index.jsx, since I will have other component(DropdownBtn etc) using the same style.

Button/index.jsx

import React, {useState} from 'react';
import Button from '@material-ui/core/Button';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  button: {
    margin: theme.spacing(1),
  },
}));

export default function IconLabelButtons(props) {
  const classes = useStyles();
  const {name} = props;

  return (
      <Button
        variant="contained"
        color="primary"
        className={classes.button}
      >
        {name}
      </Button>
  );
}

App/style.css

.Button {
  font-size: 14px;
}
material-ui reactjs css
1 Answers

You can simply pass/add other CSS classname to button and then use it inside your styles.css

return (
  <Button
    variant="contained"
    color="primary"
    className={classes.button+" yourclasshere"}
  >
    {name}
  </Button>

);

then use like this

.yourclasshere{
  font-size: 14px;
}
user_125414130
Related