Whenever I use a container in material-ui, I have to manually set the maxWidth to false. Since I don't think I will ever require the maxWidth of the container to every be anything but 100% of the available space and it is what I expect container to work, I wanted to set it globally in my react app.
What I have to do every time
import React from "react";
import Container from "#material-ui/core/Container";
import Paper from "#material-ui/core/Paper";
export default function App() {
return (
<Container maxWidth={false}>
.
.
.
</Container>
);
}
I tried setting it in the createTheme, but it does not work.
const theme = createMuiTheme({
overrides: {
MuiContainer: {
root: {
maxWidth: `100%`,
},
},
},
});
Instead of trying to override the CSS, the simplest approach is to set the default for the prop:
const theme = createMuiTheme({
props: {
MuiContainer: {
maxWidth: false
}
}
});
Related answers:
Is it possible to override material-ui components default props?
How to override Material UI .MuiContainer-maxWidthLg?
Related
This is how you create a theme and propagate it using MUI.
import { ThemeProvider } from "#mui/material";
const myTheme = createTheme({
backgroundColor: {
primary: "#f9f9fb",
secondary: "#ededf3",
tertiary: "#cbcbdc",
},
})
const Index: FC = () => {
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
};
Now, for some reason, I need to get the context of the MUI theme in my app.
I've search everywhere but it seems that they do not expose the context anywhere. I found 3 contexts in private-theming, styled-engine and styled-engine-sc but none of them worked.
How can I do that ?
The way you create the theme it wrong should be like following:
const theme = createTheme({
palette: {
primary: {
main: red[500],
},
},
});
with the property palette.
and the way to get values you could use the hook useTheme .
first import
import { useTheme } from "#mui/material";
and inside your components you can use the palette you set to your theme like:
const { palette } = useTheme();
MUI uses the context provided by the styled engine:
import { ThemeContext } from '#mui/styled-engine';
It can also be imported directly from your engine of choice (emotion in the example below):
import { ThemeContext } from '#emotion/react';
I'm not sure if this is possible or not, after looking at Material UI's documentation on How to Customize, but I'm trying to isolate styleOverrides for a given component using styled() rather than applying a lot of overrides within a global theme file.
Currently, my theme file looks something like this, with some typography and palette overriding Material UI's default theme:
const theme = createTheme({
palette: { ...
},
typography: { ...
}
});
When I use a Chip component (rendered in Storybook currently) and pass in success, primary, secondary, etc. into the color prop, the corresponding theme colors are applied. However, when I try to override the theme files, using styled(), the colors defined in the theme are still being applied - as opposed to my overrides defined. My component file looks like the following:
import { styled } from '#mui/material/styles';
import MuiChip, { ChipProps } from '#mui/material/Chip';
const Chip = styled(MuiChip)<ChipProps>(({ theme }) => ({
colorPrimary: {
backgroundColor: theme.palette.primary.light
},
colorSecondary: {
backgroundColor: theme.palette.secondary.light
}
}));
export default Chip;
You can create your own custom variant and define your own styles to it
const theme = createTheme ({
components : {
MuiButton : {
variants : [
{ props : { variant : 'YouVarName'},
style: { //..your styles } ,
},},
I have a good understanding of how to style MUI <Typography> thanks to the various examples available. I also understand how to define and use the global MUI theme.
But is it possible for a MUI <Typography> to adopt color='text.primary' by default...? If I don't add this attribute, the color is always black, instead of the custom color I've set for text.primary.
Or is the preferred approach to always override / never use <Typography> directly, by defining an application-specific component for e.g. the standard body text, to ensure it has the correct color?
You can make your own component passing preferred color as default if it is not provided, it is a known react pattern named composition.
const MyTypography = ({color='text.primary', ...rest}) => (
<Typography {...rest} color={color} />
)
You can also configure the material theme be always your preferred color, here is the default theme
import type { Components,Theme } from "#mui/material";
export const MuiTypography = (theme: Theme): Components["MuiTypography"] => ({
defaultProps: {
color: "text.primary",
},
});
const initialTheme = createMuiTheme({
typography, // for font size and variants mapping
// ... other theme config
});
const theme = createMuiTheme(initialTheme, {
components: {
MuiTypography: MuiTypography(initialTheme)
}
})
I have an application that utilizes box's in place of where divs would typically be placed to stay within the MUI ecosystem. My question is, is it possible to have a global theme override for all box components much like how you can globally override the background color for all cards using theme provider.
You can override the Card styles globally using createTheme() because the Card has a name and a styleOverrides callback when it is styled using the styled() API. However, the Box does not, as you can see from the definition here.
const theme = createTheme({
components: {
// this works
MuiCard: {
styleOverrides: {
//
}
},
// this does not work
MuiBox: {
styleOverrides: {
//
}
}
}
});
If you want to create a base component like the Box that can be styled globally by createTheme, you need to define the following properties in the options when calling styled()
name: so the styled engine can identify your component.
overridesResolver: to let MUI know how to resolve the final styles (by combining with other styles created by custom variant, prop and state of the component).
Below is the minimal example for demonstration:
const theme = createTheme({
components: {
MuiDiv: {
styleOverrides: {
root: {
backgroundColor: "green"
}
}
}
}
});
const Div = styled("div", {
name: "MuiDiv",
overridesResolver: (props, styles) => {
return [styles.root];
}
})();
<Div sx={{ width: 10, height: 10 }} />
Live Demo
References
https://mui.com/system/styled/#api
https://mui.com/system/styled/#custom-components
I am struggling to change the font family on Material-UI. I am trying to set it for the whole project using MuiTheme. How can I do this using a font from Google Fonts?
Someone did this in another topic
import { createMuiTheme } from 'material-ui/styles';
import createPalette from 'material-ui/styles/palette';
import createTypography from 'material-ui/styles/typography';
const theme = createMuiTheme({
typography: createTypography(createPalette(), {
fontFamily: '"Comic Sans"',
})
});
class App extends Component {
render() {
return (
<MuiThemeProvider theme={theme}>