I'm using MUI & REACT for my web application but was wondering how could you fill a SVG with the color value defined in my MUI palette.
My palette looks like this:
const theme = createTheme(
{
palette: {
mode: "light",
primary: {
main: "rgba(33, 150, 243, 1)",
dark: "rgb(31,141,229)",
light: "rgb(35,157,253)"
},
secondary: {
main: "rgba(255, 82, 82, 1)",
dark: "rgb(232,74,74)",
light: "rgb(253,92,92)"
},
background: {
main: "hsl(0, 0%, 87%)",
default: "hsl(0,0%,95%)"
},
common: {
main: "hsl(0, 0%, 96%)",
white: "hsl(0,0%,100%)"
},
text: {
primary: "#232323",
secondary: "#444444"
}
}
},
localsMui[lang]
)
And the SVG which I try to apply the color:
<LogoutIcon fill="primary.main"/>
Does anyone have an idea?
I tried to use useTheme() but it doesn't work either.
Related
I am trying to style buttons in a custom MUI theme however, when I try to incorporate components into my code I get the following error:
This is strange to me because I am directly following the documentation here but still getting this error.
I can't tell what I might be doing wrong below is the code I am currently working with, did I forget to import something?
import { createTheme } from '#mui/material/styles';
const theme = createTheme({
palette: {
primary: {
light: '#6826FB',
main: '#6826FB',
dark: '#CDBDFF',
},
secondary: {
light: '#625883',
main: '#615B71',
dark: '#CCC0F1',
contrastText: '#ffcc00', //not sure
},
contrastThreshold: 3,
tonalOffset: 0.2,
},
typography: {
subtitle1: {
fontSize: 12,
},
body1: {
fontWeight: 500,
},
button: {
fontFamily: 'Roboto',
fontSize: '12px',
fontStyle: 'SemiBold',
},
},
components: {
MuiButton: {
styleOverrides: {
root: {
fontSize: '0.75',
background: '#5B00EF',
borderRadius: '4px',
},
},
},
});
Is this the best way to do this? I found another way to apply styling to components in the code base which I can refer to below but it believe it might be deprecated? What is the difference between Overides and StyleOverides?
const theme = createTheme({
palette: {
primary: {
light: "rgb(234, 227, 243)",
main: "#5B00EF",
},
secondary: {
main: "#1C1B1F",
},
},
overrides: {
MuiButton: {
root: {
textTransform: "capitalize",
fontSize: 12,
lineHeight: "14px",
fontWeight: 600,
},
},
},
});
I tried changing styleOverides (even though this is what the documentation in react suggests) and tried to instead use overrides and this removed the issue but I feel as though I am confused why the documentation suggests one way versus the other unless this way is deprecated? Is the documentation not up to date?
I'm writing a React application using Material UI. I have the following global theme file:
import { createMuiTheme } from '#material-ui/core/styles';
import createBreakepoints from '#material-ui/core/styles/createBreakpoints';
import '../../index.css';
const font = "'Ubuntu', sans-serif";
const breakpoints = createBreakepoints({});
const theme = createMuiTheme({
palette: {
primary: {
main: '#3a2d96',
},
secondary: {
main: '#ff7b7d',
},
text: {
primary: 'white',
secondary: 'black',
},
grey: {
A100: '#988d8b',
A200: '#3f3f46',
},
},
typography: {
fontFamily: font,
[breakpoints.up('md')]: {
fontSize: 6,
},
[breakpoints.up('sm')]: {
fontSize: 4,
},
},
});
export default theme;
The breakpoints aren't applied.
I'm trying to change the fontSize property on the global theme file so that any typography component in my app will have this rule.
I understand that in MaterialUI, it is possible to customize the theme to use different colors.
The colors exposed by MaterialUI, have different shades. For instance:
import purple from '#material-ui/core/colors/purple';
const theme = createMuiTheme({
palette: {
primary: {
main: purple,
},
secondary: {
main: "#22B469",
light: "rgb(78, 195, 135)",
dark: "rgb(23, 125, 73)",
contrastText: "#ffffff"
},
},
});
Looking at the console.log(theme), we see that the primary color is filled with shades, but not for the secondary color, where the color has been overridden by a hex color code.
In MaterialUI documentation, it's only mentioned to use light, main, dark, and contrastText when using a custom hex color.
Sure, I can add those shades one by one under the secondary key, but this solution doesn't look elegant.
What are the best practices when overriding a theme color with hex code and is there a way to auto-generate the shades from a custom hex color?
You can make a custom color generated here in a module and import it.
const amber = {
50: '#fff8e1',
100: '#ffecb3',
200: '#ffe082',
300: '#ffd54f',
400: '#ffca28',
500: '#ffc107',
600: '#ffb300',
700: '#ffa000',
800: '#ff8f00',
900: '#ff6f00',
A100: '#ffe57f',
A200: '#ffd740',
A400: '#ffc400',
A700: '#ffab00'
};
const _default = amber;
exports.default = _default;
import purple from '#material-ui/core/colors/purple';
import indigo from '#material-ui/core/colors/indigo';
const theme = createMuiTheme({
palette: {
primary: {
main: purple,
},
secondary: {
main: purple,
light: "rgb(78, 195, 135)",
dark: "rgb(23, 125, 73)",
contrastText: "#ffffff",
indigo: indigo //<---------- do what you want
},
},
});
then in your style definition:
{...
root: {
color: theme.palete.secondary.indigo[700],
},
...}
Im using Material-UI within my application. The typography and palletes overriding is working perfectly. But when I try to overrides the MUIButton, nothing happens. This is my Style file:
const theme = createMuiTheme(SculpStyle);
export const SculpStyle = {
typography: {
fontFamily: ["Circular", "Open Sans", "Arial", "sans-serif"].join(","),
//fontSize: 20
// htmlFontSize: 12,
},
palette: {
primary: {
// light: will be calculated from palette.primary.main,
main: "#50be9c"
// dark: will be calculated from palette.primary.main,
// contrastText: will be calculated to contrast with palette.primary.main
},
secondary: {
light: "#1e8fb2",
main: "#ee4d73",
// dark: will be calculated from palette.secondary.main,
contrastText: "#ffcc00"
},
// contrastThreshold: 3,
// tonalOffset: 0.2
overrides: {
MuiButton: {
root: {
fontWeight: "bold",
backgroundColor: "red",
margin: "10px",
"&:hover": {
backgroundColor: "green"
}
}
}
}
}
};
Im following exactly the Material-UI API, but the Button is never overrided. What Im doing wrong here?
It looks like you defined your overrides on the wrong level, in your code those are nested within palette, but according to the documentation, the overrides for a specific component should be present on the "root" level of the configuration object (See here).
const theme = createMuiTheme(SculpStyle);
export const SculpStyle = {
typography: {
fontFamily: ["Circular", "Open Sans", "Arial", "sans-serif"].join(","),
//fontSize: 20
// htmlFontSize: 12,
},
palette: {
primary: {
// light: will be calculated from palette.primary.main,
main: "#50be9c"
// dark: will be calculated from palette.primary.main,
// contrastText: will be calculated to contrast with palette.primary.main
},
secondary: {
light: "#1e8fb2",
main: "#ee4d73",
// dark: will be calculated from palette.secondary.main,
contrastText: "#ffcc00"
},
// contrastThreshold: 3,
// tonalOffset: 0.2
},
overrides: {
MuiButton: {
root: {
fontWeight: "bold",
backgroundColor: "red",
margin: "10px",
"&:hover": {
backgroundColor: "green"
}
}
}
}
};
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
}
});