MUI Button Component, Color Not Showing

Question

I'm using buttons through MUI package, and my colours are disabled, despite setting it. See below:

Despite using the color and theme injection, such as:

const theme = createTheme ({
  // within themes, must pass each with primary secondary etc
  //e.g text.secondary to access key
  palette: {
    type: 'dark',
    primary: {
      main: '#009360',
      light: '#41aa86',
    },
    secondary: {
      main: '#4eccf5',
      dark: '#1ab6f1',
      contrastText: 'rgba(255,255,255,0.87)',
      light: '#94d4ea',
    },
    text: {
      primary: 'rgba(43,43,43,0.87)',
      secondary: 'rgba(160,160,160,0.54)',
      disabled: 'rgba(106,111,83,0.38)',
      hint: 'rgba(57,57,57,0.38)',
    },
    success: {
      main: '#50b154',
    },
    error: {
      main: '#f54437',
    },
  },
  typography: {
    h1: {
      fontSize: '6.6rem',
      fontWeight: 400,
      fontFamily: '"Fira Sans"',
    },
    h2: {
      fontSize: '6.2rem',
      fontWeight: 300,
      fontFamily: '"Fira Sans"',
    },
    h3: {
      fontSize: '2.2rem',
      fontWeight: 500,
      fontFamily: '"Fira Sans"',
    },
    h4: {
      fontSize: '1.8em',
      fontWeight: 500,
      fontFamily: '"Fira Sans"',
    },
    h5: {
      fontSize: '1.3em',
      fontWeight: 600,
      fontFamily: '"Fira Sans"',
    },
    subtitle1: {
      fontSize: '0.8em',
      fontWeight: 400,
      fontFamily: '"Fira Sans"',
    },
    subtitle2: {
      fontSize: '0.9em',
      fontWeight: 600,
      fontFamily: '"Fira Sans"',
    },
    subtitle3: {
      fontSize: '0.8em',
      fontWeight: 500,
      fontFamily: '"Fira Sans"',
    },
    subtitle4: {
      fontSize: '0.6em',
      fontWeight: 500,
      fontFamily: '"Droid Serif"',
    },
    subtitle5: {
      fontSize: '0.6em',
      fontWeight: 300,
      fontFamily: '"Fira Sans"',
    },
  },
})

It looks as though my colours aren't coming through. Only on hover. Why is this?

E.g some buttons I have which have this issue:

 <Button color="primary" size="sm">
                        <Typography variant="subtitle2" color="primary">
                                Sign In
                        </Typography>
                    </Button>

 <Button variant="contained" color="secondary" size="small">
                                Search
                            </Button>

If anyone knwos let me know!

Does [this answer](https://stackoverflow.com/a/60609045/13658816) help? — jsN00b, Jan 30 '22 at 12:21
No jsNoob, it appears to be a different issue. Thanks though! — n_d22, Jan 30 '22 at 12:56

score 1 · Answer 1 · answered Feb 05 '23 at 06:20

1

I have similar problem with my project when using nextjs, tailwind, and mui. just put this in the

tailwind.config.js

corePlugins: {
    preflight: false,
},

answered Feb 05 '23 at 06:20

asyrofi abdusani

11
1

MUI Button Component, Color Not Showing

1 Answers1