I am making use of both of the primary and secondary buttons on my app.
It seems that by default the primary button's color is white, which is fine. But I need my secondary button color to also be white, which it is not.
Here is what my code currently looks like:
const theme = createMuiTheme({
palette: {
primary: {
main: '#FF0000'
},
secondary: {
main: '#00FF00'
},
// Probably unrelated? But tried anyway...
text: {
primary: '#FFFFFF',
secondary: '#FFFFFF'
}
},
// Can override primary's text color from here, but no clue how to
// do so with the secondary
MuiButton: {
text: {
color: '#FFFFFF'
}
}
});
// ...
// In my component:
// Expected both buttons to have white text color, however secondary has black text. Need to override this so that both buttons have the same text color.
function MyComponent () {
return (
<ThemeProvider theme={theme}>
<Button color='primary'>Primary</Button>
<Button color='secondary'>Secondary</Button>
</ThemeProvider>
)
}
Edit: I did notice that it seems that the the button's text color is tied to it's background color. So if I put both primary and secondary buttons the same color, both their background color will default to the same. Nevertheless, my question still stands, how can I control this? Mainly for the secondary button?
You can set a contrast text as per the below
const theme = createMuiTheme({
palette: {
primary: {
main: "#FF0000",
contrastText: "#ffffff",
},
secondary: {
main: "#00FF00",
contrastText: "#ffffff",
},
},
});
Related
I have a MUI theme setup and I would like to add an alpha color to MuiChip. I am not sure on how to access the specific color inside createTheme. For example, if my primaryColor is '#FF0000' and the secondary color is '#00ff00', just for MuiChip, I want to do backgroundColor: alpha(theme.palette, 0.1); If I pass a variant prop for the chip component, the backgroundColor should be changed to the alpha version of that variant.
export const theme = createTheme({
palette: {
primary: {
main: colors.primary,
},
secondary: {
main: colors.secondary,
},
error: {
main: colors.red,
},
},
components: {
MuiChip: {
styleOverrides: {
colorPrimary: {
color: 'white',
},
root: {
backgroundColor: alpha(theme.palette, 0.1)
}
},
},
},
});
Please advice.
As I can see your theme you misunderstood how MUI works with themes. I see this main problems:
If you use just MUI colors.primary is not valid. You must use exact color code like #fff. (not true if you use some kind of color lib)
in styleOverrides you must use the template from the doc here. With this you will get theme and ownerState to manipulate components on CSS level.
theme.palette is not the exact color reference you should use theme.palette.primary.main in alpha()
You can use alpha but I think opacity is easier
Just for information for other readers here we can find CSS reference of Chip component for Rule Names to override.
I made a working code on Codesandbox, you can try it.
Here is my theme to solve the problem:
export const theme = createTheme({
palette: {
primary: {
main: "#a0a"
},
secondary: {
main: "#0a0"
},
error: {
main: "#a00"
}
},
components: {
MuiChip: {
styleOverrides: {
root: {
color: "#0a0"
},
colorSuccess: ({ ownerState, theme }) => ({
...(ownerState.variant === "custom" && {
backgroundColor: alpha(theme.palette.primary.main, 0.3)
})
})
}
}
}
});
I have two themes, darkcustomtheme:
export const darkcustomTheme = createTheme({
palette: {
mode: 'dark',
primary: {
main: darkprimaryColor,
dark: grey[100],
light: grey[200],
},
secondary: {
main: darksecondaryColor,
},
info: {
main: darkinfoColor,
}
},
And the lightcustomTheme:
palette: {
mode: 'light',
primary: {
main: lightprimaryColor,
dark: orange[100],
light: orange[200],
},
secondary: {
main: lightsecondaryColor,
},
info: {
main: lightinfoColor,
},
},
Then I use the ThemeProvider to change the theme based on the state of a switch button:
<ThemeProvider theme={theme ? darkcustomTheme : lightcustomTheme}>
The problem is that I can't pass the variants dark and light on primary palette of the customTheme on a button. I'm thinking something like
<Button size="small" variant="extended" color="primary.dark">Warning</Button>
But this not work, I can't create a custom component to pass only in this button because I'm using two customTheme, so I strictly need to pass the property like color="primary.dark"
You must use this solution.
const theme = createMuiTheme({
palette: {
type: dark ? 'dark' : 'light',
},
})
and use:
<ThemeProvider theme={theme}>
for more information read Article:
easily toggle between light and dark theme with material ui
const theme = createMuiTheme({
palette: {
type: dark ? 'dark' : 'light',
primary: {
main: dark ? darkprimaryColor : lightprimaryColor,
dark: dark ? grey[100] : orange[100],
light: dark ? grey[200] : orange[200],
},
secondary: {
main: dark ? darksecondaryColor : lightsecondaryColor,
},
info: {
main: dark ? darkinfoColor : lightinfoColor,
}
},
})
I dont need to create the dark and light theme o primary palette, its automatic creates a set based on main color.
I have a TextField: https://mui.com/components/text-fields/
<TextField
fullWidth
type={'email'}
variant={'standard'}
label={'Email'}/>
My background is dark so I'm trying to override the default colours using my theme. I have been able to change the text color and the bottom border when in focus to white but I cannot figure out how to change the bottom border to white when out of focus.
Not in focus:
In Focus:
Here is what my theme looks like:
const lightTheme: ThemeOptions = createTheme({
palette: {
primary: {
main: '#ffffff',
},
},
typography: {
allVariants: {
color: 'white'
},
},
components: {
MuiInputBase: {
styleOverrides: {
input: {
color: 'white',
}
}
}
}
});
I'm also having a hard time finding documentation on which styles are available and what they do in the Material UI docs. Perhaps in addition to helping me solve this particular problem someone can point me to a good spot in the docs for references whenever I want to change the styles on any Material UI component.
If you inspect and check the style through the browser, then you will realize the border bottom is applied for the ::before pseudo element MuiInput-root class.
Like I said, I guess it will work if you pass the same to the pseudo element into your theme.
const lightTheme: ThemeOptions = createTheme({
palette: {
primary: {
main: '#ffffff',
},
},
typography: {
allVariants: {
color: 'white'
},
},
components: {
MuiInputBase: {
styleOverrides: {
input: {
color: 'white',
'&::before': {
border-bottom: 1px solid rgba(0, 0, 0, 0.42); // use your color
}
}
}
}
}
});
I have this button on my page that changes the theme on the page from dark to light.
Text changes to white and background changes to black then I click again vice-versa. I did not specifically gave a color prop or background prop to any element but everything works. The problem is with the below buttons
As you see they are red and coming from primary.light, though when the dark theme active it needs to be primary.dark but it doesn't...
const theme = createMuiTheme({
palette: {
type: mode,
primary: {
light: "#FF0000",
main: "#3f50b5",
dark: "#002884",
contrastText: "#FF0000"
},
secondary: {
light: "#ff7961",
main: "#f44336",
dark: "#ba000d",
contrastText: "#000"
}
},
typography: {
useNextVariants: true
}
});
I have a theme with two text colors: #211806 and #010F1B.
const theme = {
palette: {
...
text: {
primary: '#211806',
secondary: '#010F1B'
},
...
}
};
However, I need to modify each text color in accordance with the state of the text (header, body, disabled and so on). Looking at the default theme, the palette is supposed to be:
const theme = {
palette: {
...
text: {
primary: "rgba(0, 0, 0, 0.87)",
secondary: "rgba(0, 0, 0, 0.54)"
},
...
}
};
so that it does not expect that one has more than one symbol color for the typography.
But I want to use both of the symbol colors depending on the base color (background, button and etc). How do I implement this two-colored text schema?