I define theme for typography but font family of Mui buttons, don't change.
typography: {
fontFamily: ["Baloo Bhaijaan 2", "cursive"].join(", "),
button: {
fontFamily: "Baloo Bhaijaan 2",
fontWeight: 500,
color: "#ffffff !important",
},
},
This modified example is provided in the MUI docs for customizing components in Material-UI version 5:
const theme = createTheme({
components: {
// Name of the component
MuiButton: {
styleOverrides: {
// Name of the slot
root: {
// Some CSS
fontFamily: "Baloo Bhaijaan 2",
fontWeight: 500,
color: "#ffffff !important"
},
},
},
},
});
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 trying to customize the color of my MUI5 TextField component. Simply overriding the primary and secondary colors is not enough, so I'm striving for more control over the colors.
The component:
<TextField
label='Username'
variant='outlined'
onChange={(e) => setToken(e.target.value)}
value={token}
size='small'
/>
This is the theme that I use:
const theme = createTheme({
components: {
MuiTextField: {
styleOverrides: {
root: {
'.MuiOutlinedInput-root': {
'.MuiOutlinedInput-notchedOutline': {
borderColor: 'pink',
},
'&:hover .MuiOutlinedInput-notchedOutline': {
borderColor: 'pink',
},
},
},
},
},
MuiInputLabel: {
styleOverrides: {
root: {
color: 'pink',
'&.Mui-focused': {
color: 'pink',
},
},
},
},
},
});
These style overrides are enough to control the color of
the label (Username) when the TextField is focused and unfocused
the border color when the TextField is unfocused or (focused AND hovered over)
The problem is that I haven't been able to change the border color when the TextField is active and not hovered over. This is the style that is applied on it: css-9ddj71-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused.MuiOutlinedInput-notchedOutline
I tried different combinations of style overrides in the custom theme but no luck so far.
Can someone tell me how to change the border color in the above case?
Maybe I should build a component with more basic components if I want such fine-grained control over colors?
try this:
styleOverrides: {
root: {
'&.Mui-focused': {
'.MuiOutlinedInput-notchedOutline': {
borderColor: 'green',
},
},
'&.Mui-error': {
'.MuiOutlinedInput-notchedOutline': {
borderColor: 'red',
},
},
},
}
Is there a way to map default typography for TextField and all my inputs via theme? I know I can do this
components: {
MuiInput: {
styleOverrides: {
root: {
fontSize: '16px',
lineHeight: '25px'
}
}
},
but I wish to find a way to map it to 'body2'
MuiInput: {
defaultProps: {
typographyProps???: {
variant: 'body2'
}
}
For using body2 font size value in another component, You need to access the theme object's typography property.
Then You will set the MUI TextFiled's font-size equal to that value from the theme object.
import { createTheme } from "#mui/material";
const theme = createTheme({});
theme!.components!.MuiTextField = {
styleOverrides: {
root: {
"& .MuiInputBase-input": {
fontSize: theme.typography.body2.fontSize, // this is the default mui body2 font-size
lineHeight: "25px", // and any other styles you want...
},
},
},
};
And You can change the body2 fontSize when defining the theme object:
const theme = createTheme({
typography: {
body2: {
fontSize: 80,
},
});
theme!.components!.MuiTextField = {
styleOverrides: {
root: {
"& .MuiInputBase-input": {
fontSize: theme.typography.body2.fontSize, // this will be 80px
lineHeight: "25px", // and any other styles you want...
},
},
},
};
EDIT:
If You are not ok with overriding the theme after defining it, You can use this approach:
import { createTheme } from "#mui/material";
const myBody2FontSize = 20px;
const theme = createTheme({
typography: {
body2: {
fontSize: myBody2FontSize,
},
},
components: {
MuiTextField: {
styleOverrides: {
root: {
"& .MuiInputBase-input": {
fontSize: myBody2FontSize , // this is the default mui body2 font-size
lineHeight: "25px", // and any other styles you want...
},
},
},
},
},
});
You could try setting it via classname. Its a bit awkward because an input doesnt actually use Typography internally.
MuiInput: {
defaultProps: {
className: 'MuiTypography-body2'
}
}
Or possibly
MuiTextField: {
defaultProps: {
InputProps: {className: 'MuiTypography-body2' }
}
}
I'm just getting started with MUI, and need help with setting breakpoints of different variants of MUI components.
let theme = createTheme({
components: {
MuiTypography: {
variants: [
{
props: { variant: "login-static-title" },
style: {
fontFamily: "Jack Bold",
textTransform: "uppercase",
fontSize: "2rem",
},
},
{
props: { variant: "login-static-bank-name" },
style: {
fontFamily: "Jack Medium",
textTransform: "uppercase",
},
},
],
},
},
});
export default theme;
However, this works, but I want my different variants to have different breakpoints.
theme.typography.staticLoginTitle = {
fontFamily: "Jack Bold",
textTransform: "uppercase",
[theme.breakpoints.up("sm")]: {
fontSize: "2.5rem",
},
[theme.breakpoints.between("xs", "sm")]: {
fontSize: "1.5rem",
},
};
Thanks in advance.
I'm using Material UI with Create React App and trying to include the "Open Sans" font that I downloaded in ttf format. Following the documentation on Material UI for self-hosted fonts, my current theme.js file looks like this:
import OpenSansRegular from "./fonts/OpenSans-Regular.ttf";
import OpenSansBold from "./fonts/OpenSans-Bold.ttf";
import OpenSansSemiBold from "./fonts/OpenSans-SemiBold.ttf";
import { createMuiTheme } from "#material-ui/core/styles";
const openSansRegular = {
fontFamily: "Open Sans",
fontStyle: "normal",
fontDisplay: "swap",
src: `
local("Open Sans"),
local("OpenSans-Regular")
url(${OpenSansRegular}) format("ttf")
`,
};
const openSansSemibold = {
fontFamily: "Open Sans",
fontStyle: "normal",
fontDisplay: "swap",
src: `
local("Open Sans"),
local("OpenSans-SemiBold")
url(${OpenSansSemiBold}) format("ttf")
`,
};
const openSansBold = {
fontFamily: "Open Sans",
fontStyle: "normal",
fontDisplay: "swap",
src: `
local("Open Sans"),
local("OpenSans-Bold")
url(${OpenSansBold}) format("ttf")
`,
};
const theme = createMuiTheme({
typography: {
fontFamily: "Open Sans",
fontSize: 14,
h1: {
fontSize: 20,
fontWeight: "bold",
},
h2: {
fontSize: 18,
fontWeight: "bold",
},
h3: {
fontSize: 16,
fontWeight: "bold",
},
overrides: {
MuiCssBaseline: {
"#global": {
"#font-face": [openSansRegular]
}
}
},
});
export default theme;
I am unable to figure out how to actually use its variants such as openSansSemiBold and openSansBold. Where exactly do I specify in the theme so they are recognized? And say I want a text to be semibold in some part of the app, how exactly I am going to refer to it?
I haven't been able to find a clear answer to this so far.
You can put all fonts into array.
var customFontFamily = [openSansRegular,openSansSemibold,openSansBold];
var customTypo = {
...
body1 :{
fontFamily: 'OpenSans-Regular',
},
h1:{
fontFamily: 'OpenSans-SemiBold',
},
h2:{
fontFamily: 'OpenSans-Bold',
},
...
};
const theme = createMuiTheme({
typography: customTypo
overrides: {
MuiCssBaseline: {
"#global": {
"#font-face": [customFontFamily]
}
}
},
});