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.
Related
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"
},
},
},
},
});
I am trying to customise my theme for material v5 and I would like to know how I can disable the black border that appears when I hover over the textfield component. This is what I have so far under my custom theme
MuiTextField: {
styleOverrides: {
root: {},
},
defaultProps: {
inputProps: {
style: {
fontSize: '11.8px',
// height: '.85rem',
},
},
},
},
Checkout the documentation at: https://mui.com/material-ui/react-text-field/#customization
import * as React from 'react';
import { alpha, styled } from '#mui/material/styles';
import TextField from '#mui/material/TextField';
const CssTextField = styled(TextField)({
'& label.Mui-focused': {
color: 'green',
},
'& .MuiInput-underline:after': {
borderBottomColor: 'green',
},
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: 'red',
},
'&:hover fieldset': {
borderColor: 'yellow',
},
'&.Mui-focused fieldset': {
borderColor: 'green',
},
},
});
export default function CustomizedInputs() {
return (
<CssTextField label="Custom CSS" id="custom-css-outlined-input" />
);
}
Change your styleOverrides like this:
MuiTextField: {
styleOverrides: {
root: {
"& .MuiOutlinedInput-root": {
"&:hover fieldset": {
borderColor: "rgba(0, 0, 0, 0.23)",
},
"&.Mui-focused fieldset": {
borderColor: "rgba(0, 0, 0, 0.23)",
},
},
},
},
defaultProps: {
inputProps: {
style: {
fontSize: "11.8px",
// height: '.85rem',
},
},
},
},
I have a react setup in which I am using Tailwind and Material-UI. I have a component library in the Storybook which has MUI Theme in it to style the variants like button outline. I am trying to find a way of how can I use these two things to make the react app white-labeled. Basically, Which properties I can set in my theme that it can be directly applied to the components by the user/providers/companies. Currently, my theme looks something like this in the component library.
import { createTheme, ThemeOptions } from '#mui/material/styles';
import { Colours } from '../common';
export const MyThemeOptions: ThemeOptions = {
palette: {
primary: {
main: Colours.primary,
},
secondary: {
main: Colours.secondary,
},
error: {
main: Colours.error,
},
warning: {
main: Colours.warning,
},
info: {
main: Colours.info,
},
success: {
main: Colours.success,
},
},
components: {
MuiButton: {
styleOverrides: {
root: {
borderRadius: '4px',
},
contained: {
padding: '4px 12px',
},
outlined: {
border: '1px solid #bdbdbd',
textTransform: 'none',
minWidth: 0,
color: '#212121',
},
outlinedSizeSmall: {
padding: '2px',
},
outlinedSizeMedium: {
padding: '6px',
},
outlinedSizeLarge: {
padding: '10px'
},
},
},
MuiButtonGroup: {
styleOverrides: {
grouped: {
minWidth: 0,
},
},
},
MuiCard: {
styleOverrides: {
root: {
boxShadow: '0 3px 7px 0 rgba(98, 125, 152, 0.16), 0 0 2px 0 rgba(36, 59, 83, 0.04)',
},
},
},
MuiToggleButton: {
styleOverrides: {
root: {
border: '1px solid #bdbdbd',
borderRadius: '4px',
textTransform: 'none',
color: '#212121',
minWidth: 0,
},
sizeSmall: {
padding: '2px',
},
sizeMedium: {
padding: '6px',
},
sizeLarge: {
padding: '10px',
}
}
}
},
};
const MyTheme = createTheme(MyThemeOptions);
export default MyTheme;
I am not able to find an article or tutorial or something which could lead me in a direction of how can I achieve the white labeling? If you know any knowledge asset in this direction, please share with me. Thank you!
This question already has an answer here:
Global outlined override
(1 answer)
Closed 2 years ago.
I have a custom theme in which I'd like to override the border-color of the OutlinedInput component. Anyone has any idea how to override the focused color?
export const defaultTheme = createMuiTheme({
palette: {
primary: {
main: colors.primary,
contrastText: colors.white,
},
...
},
typography: {
...
},
overrides: {
MuiButton: {
outlinedPrimary: {
color: colors.text,
},
},
MuiInput: {
underline: {
'&::before': {
borderBottomColor: colors.grey,
},
'&::after': {
borderBottomColor: colors.greyDark,
}
},
},
MuiOutlinedInput: {
notchedOutline: {
borderColor: colors.grey,
},
}
}
});
Found the solution:
overrides: {
MuiButton: {
outlinedPrimary: {
color: colors.text,
},
},
MuiInput: {
underline: {
'&::before': {
borderBottomColor: colors.grey,
},
'&::after': {
borderBottomColor: colors.greyDark,
}
},
},
MuiOutlinedInput: {
root: {
'&$focused': {
'& $notchedOutline': {
borderColor: colors.greyDark,
},
},
},
notchedOutline: {
borderColor: colors.grey,
},
}
}
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]
}
}
},
});