CODEWITHSUNDEEP
reactjsmaterial-ui
nodeDev
nodeDev

Reputation: 131

useStyles hook not working in Material-ui

i am trying to add css styling to a material-ui component but the styling is not working ,check the button component i have addded className ={classes.btn}, there are no warning and errors given.

here is the code

import "./App.css";

import { Button, Container, Typography } from "@mui/material";
import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";

import { makeStyles } from '@mui/styles';

const useStyles = makeStyles({

btn:{

  fontSize:50,
  backgroundColor:"green"
}  


})


function App() {
 
const classes = useStyles()
 
  return (
    <Container>
    
      <Button
    className={classes.btn}
        variant="contained"
        color="error"
        type="submit"
        onClick={() => {
          console.log("you clicked me ");
        }}
        endIcon={<KeyboardArrowRightIcon />}
      >
        Submit
      </Button>
    </Container>
  );
}

export default App;

Upvotes: 4

Views: 2484

Answers (1)

Majid M.
Majid M.

Reputation: 4954

Try:

const useStyles = makeStyles({
  btn: {
    fontSize: "50px !important",
    backgroundColor: "green !important"
  }
});

Edit tender-morning-t99zb

Upvotes: 2

Related Questions