I am using React with TypeScript and Material UI. So I have the the following layout
<MuiThemeProvider theme={muiTheme}>
<My Component/>
</MuiThemeProvider>
And then in my component I have something similar to
let styles: any = ({ palette }: any) => ({
root: {
marginTop: 10
}
});
export default withStyles(styles)(MyComponent);
What would be the preferred way to go if I want to share the root class among multiple components? Can I extend Material UI theme when I am creating it using createMuiTheme?
Any advise will be highly appreciated
Here is how I define my custom theme in Material-ui
const Theme = createMuiTheme({
typography: {
fontSize: 18,
},
palette: {
primary: {
light: '#40bbbf',
main: '#032B43',
dark: '#0b777b',
},
},
customCommonClass: {
textAlign: center,
},
})
Theme.overrides = {
MuiListItemIcon: {
root: {
marginRight: 0,
},
},
MuiListItem: {
dense: {
paddingTop: '4px',
paddingBottom: '4px',
},
},
}
There are 3 parts within this creation:
the first I will define some defaults of my theme (for the fontSize, and palette color as an example)
The second I create some global class customCommonClass that I can use in all styled components down the road (your question)
I override some class of the material ui components.
hope this can help
Related
I am writing plugin to add custom styles in TailwindCSS, but I am a bit confused with values of theme(). I don't know how to see all the theme values to apply my base styles. How do I know where it is?
module.exports = {
// ...
plugins: [
plugin(function ({ addBase, addComponents, addUtilities, theme }) {
addBase({
'h1': {
fontSize: theme('fontSize.2xl'), // need to see more fontSize and properties, where I can see it?
},
'h2': {
fontSize: theme('fontSize.xl'),
},
})
}
]
}
I'm using Mui5 with SC and I have issues with overriding theme base values.
I have base theme like this for base mui components, for example:
const theme = createTheme({
components: {
MuiButton: {
styleOverrides: {
root: {
borderRadius: "1.75rem",
color: "red",
}
}
}
}
});
And now I like to extend the base button with custom colors like this with SC:
const StyledButton = styled(Button)(({ theme }: { theme: Theme }) => {
return {
fontFamily: theme.xxx,
color: "green"
};
});
This is not working, only the theme defaults are applied.
What's wrong with the implementation or what I'm missing?
BR,
Are you using any other package such as material-ui.
Are all your packages also up to date and have these installed:
"#emotion/css": "^11.9.0",
"#emotion/react": "^11.9.3",
"#emotion/styled": "^11.9.3",
"#mui/material": "^5.9.1",
"#mui/styled-engine": "^5.8.7",
"#mui/styles": "^5.9.1",
I have some unexpected CSS behaviour that I don't understand - can anyone help me understand why it's happening, and help me get my CSS imports right?
I have a react app that uses a single component, that imports a stylesheet from a separate file brand.js. The component has an <Avatar className={classes.avatarTM}>; brand.js defines that class as having a backgroundColour of Dark Blue, which is what I'm expecting.
But when I load the app in Chrome, that avatar loads grey, not blue. Inspecting the element shows that two styles apply: .makeStyles-avatarTM-11 with the expected backgroundColor of primary.dark, and .MUIAvatar-colorDefault with backgroundColor #bdbdbd. colorDefault takes precedence on backgroundColor over avatarTM-11, so I get a grey avatar. This is not good.
If I then edit the // deleteme comment in brand.js in Visual Studio and save the file, React auto-refreshes the avatar in Chrome in Blue. avatarTM-11 is now taking precedence over colorDefault.
If I then reload the page in Chrome, it reloads as default grey.
But the bit that really screws up my attempts at bugfixing is that if I create a new file brand2.js, and copy/paste the exact content of brand.js into that new file, then modify the imports in App2.js and testComponent.js to import brand2 instead of brand, it works just fine. avatarTM-11 now takes precedence over default no matter what loads the page, and I get a blue avatar.
So just use brand2 instead of brand, right? Right. So I delete brand.js.... and the problem comes back.
What exactly is happening here? How do I get my defined avatarTM style to always take precedence, no matter what is loading the page or what the stylesheet is called? Why should the presence or absence of a file that is not being used by the app affect anything?
app2.js:
import React from 'react';
import { ThemeProvider } from '#material-ui/core/styles';
import { theme } from './components/Brand';
import TestComponent from './components/testComponent';
export default function App() {
return (
<React.Fragment>
<ThemeProvider theme={theme}>
<TestComponent />
</ThemeProvider>
</React.Fragment>
);
}
testComponent.js:
import React from 'react';
import Avatar from '#material-ui/core/Avatar';
import Card from '#material-ui/core/Card';
import CardHeader from '#material-ui/core/CardHeader';
import { useStyles } from './Brand';
export default function TestComponent() {
const classes = useStyles();
return (
<Card className={classes.card} variant="outlined">
<CardHeader
avatar={
<Avatar aria-label="testComponent" className={classes.avatarTM}>
t
</Avatar>
}
title="testComponent"
/>
</Card>
)}
brand.js:
import { createMuiTheme } from '#material-ui/core/styles';
import { makeStyles } from '#material-ui/core/styles';
const theme = createMuiTheme({
palette: {
primary: {
main: '#014EAA',
contrastText: '#ffffff',
},
secondary: {
main: '#0099CC',
contrastText: '#ffffff',
},
info: {
main: '#666666',
contrastText: '#ffffff',
},
error: {
main: '#FF6600',
contrastText: '#ffffff',
},
success: {
main: '#339933',
contrastText: '#ffffff',
},
},
});
// deleteme
const useStyles = makeStyles(theme => ({
root: {
color: theme.palette.primary,
fontSize: 10,
padding: '6px 12px',
fontFamily: ['sans-serif']
},
card: {
minwidth: 275,
},
title: {
fontSize: 24
},
cardTitle: {
fontSize: 24,
color: theme.palette.primary.main,
},
cardSubtitle: {
fontSize: 14,
color: theme.palette.secondary.main
},
cardDescription: {
fontSize: 10,
},
avatarTM: {
backgroundColor: theme.palette.primary.dark
},
avatarUnknown: {
backgroundColor: theme.palette.warning.main
},
avatarFixed: {
backgroundColor: theme.palette.primary.light
},
}));
export { theme, useStyles }
You can try force this style putting property like this:
avatarTM: {
backgroundColor: 'theme.palette.primary.dark !important'
},
I am trying to provide overrides in the theme for buttons that are contained, primary and hovered. I tried this but it doesn't work
CODESANDBOX LINK CLICK HERE
theme/overrides/MuiButton.js
import palette from '../palette';
export default {
contained: {
backgroundColor: '#FFFFFF',
'&.primary': {
'&:hover': {
backgroundColor: palette.primary.dark,
},
},
},
};
theme/overrides/index.js
import MuiButton from "./MuiButton";
export default {
MuiButton
};
theme/index.js
import { createMuiTheme } from "#material-ui/core";
import palette from "./palette";
import typography from "./typography";
import overrides from "./overrides";
const theme = createMuiTheme({
palette,
typography,
overrides,
zIndex: {
appBar: 1200,
drawer: 1100
}
});
export default theme;
The best resource for determining how to appropriately override the default styles in your theme, is to look at how the default styles are defined.
From https://github.com/mui-org/material-ui/blob/v4.11.0/packages/material-ui/src/Button/Button.js#L138:
containedPrimary: {
color: theme.palette.primary.contrastText,
backgroundColor: theme.palette.primary.main,
'&:hover': {
backgroundColor: theme.palette.primary.dark,
// Reset on touch devices, it doesn't add specificity
'#media (hover: none)': {
backgroundColor: theme.palette.primary.main,
},
},
},
Translating this approach to the code in your question would look like this:
import palette from '../palette';
export default {
containedPrimary: {
backgroundColor: '#FFFFFF',
'&:hover': {
backgroundColor: palette.primary.dark,
},
},
};
<AppBar className={classes.header}/>
The suspect
const classes = useStyles();
const useStyles = makeStyles((theme: Theme) =>
createStyles({
header: {
borderTop: '10px',
borderTopColor: '#367BB5'
},
grow: {
flexGrow: 1
},
menuButton: {
marginRight: theme.spacing(2),
}
);
The grow, and menuButton styling came from the AppBar code directly from Material Ui, but I am trying to implement the header style into the AppBar, unsuccessfully, I have read the documentation but its not very clear to me.
export default Header;
EDIT:
The docs say that the Style sheet name: MuiAppBar but whenever I change header to that, it doesn't change anything
const useStyles = makeStyles({
root: {
position: 'static', // doesnt work
borderTop: '100px', // doesnt work
borderTopColor: '#367BB5', // doesnt work
backgroundColor: '#fafafa',
},
})
<AppBar position="static" classes={{ root: classes.root }}>
Doing this allows me to change the backgroundColor, but the other properties don't work. Not sure why
It's important that you follow this page: https://material-ui.com/customization/theming/
You need to use the ThemeProvider in order to custom the style.