Is it possible to add predefined spacing key/values in Material UI theme so that I can use the key name in order to define the spacing value?
spacing: {
no: 0,
xs: 2,
sm: 4,
md: 8,
lg: 16
},
you can add a custom object with the required properties in the mui theme, and then you can use that in the stylings.
example:
const theme = createMuiTheme({
custom: {
spacing: {
no: 0,
xs: 2,
sm: 4,
md: 8,
lg: 16
}
}
});
Now you can use these properties in several ways like in makeStyles or using useTheme hook.
makeStyles example:
const useStyles = makeStyles((theme) => ({
demo:{
margin: theme.custom.spacing.sm
}
}));
useTheme example:
export default function App() {
const theme = useTheme();
return (
<Grid spacing={theme.custom.spacing.sm}>
</Grid>
);
}
Related
How to change/customize the default color of selected rows in a Material-UI table (of type Sorting & Selecting)? By default it is secondary (red) color (Codesandbox here: https://codesandbox.io/s/3sjxh). How to change it to a custom color, or at least to primary (blue), as it appears in the new beta version (https://next.material-ui.com/components/tables/#main-content) (v5).
You have to pass your styles to the classes props in order to change the styles for the TableRow.
To achieve the background-color change you want to override the default classes: .MuiTableRow-root.Mui-selected and .MuiTableRow-root.Mui-selected:hover.
To override them you have to use a parent reference with a so called $ruleName in your makeStyles hook. Here is a very good explanation from #Ryan Cogswell if you are more interested how it works.
This would then look like this:
const useStyles = makeStyles((theme) => ({
// your other styles
...,
tableRowRoot: {
"&$tableRowSelected, &$tableRowSelected:hover": {
backgroundColor: theme.palette.primary.main
}
},
tableRowSelected: {
backgroundColor: theme.palette.primary.main
}
}));
...
<TableRow
// your other props
...
classes={{
root: classes.tableRowRoot,
selected: classes. tableRowSelected,
}}
>
...
</TableRow>;
For the checkboxes, you only have to add the color prop in order to change it:
<Checkbox
// other props
...
color="primary"
/>
and for your Toolbar, you only need to change the provided highlight class inside your useToolbarStyles in order to get things working:
import { alpha } from "#material-ui/core/styles";
...
const useToolbarStyles = makeStyles((theme) => ({
...,
highlight:
theme.palette.type === "light"
? {
color: theme.palette.primary.main,
backgroundColor: alpha(
theme.palette.primary.light,
theme.palette.action.selectedOpacity
)
}
: {
color: theme.palette.text.primary,
backgroundColor: theme.palette.primary.dark
},
}));
Live demo:
I have the following code where I need to reference another rule name to avoid style duplication in material ui. Unfortunately the rules aren't reflecting.
const useNavStyles = makeStyles((theme) => ({
active: {
color: 'green'
},
listItem: {
borderTopRightRadius: 100,
borderBottomRightRadius: 100,
paddingBottom: 12,
paddingTop: 12,
backgroundColor: theme.palette.background.paper,
},
subListItem: {
"&$listItem": { // I wish to copy over the properties from the above listItem rule and only add padding to it, but it isn't working.
paddingLeft: theme.spacing(4),
},
},
How do I resolve this?
Thanks
Referencing a local rule name does not "copy over" other styles. It changes your selector. You will still need to apply all those classes to your elements, which in return will then also apply the respective styles.
listItem: {
color: 'hotpink',
},
subListItem: {
"&$listItem": {
fontWeight: 'bold'
}
}
this compiles to
.listItem-1: {
color: hotpink;
}
.subListItem-0.listItem-1: {
font-weight: bold;
}
In other words, this will apply styles to an element that has both these classes:
<div className={clsx(classes.listItem, classes.subListItem)}>
hotpink and bold
</div>
<div className={classes.subListItem}>no styles at all</div>
How can I make that the typography component of Material-UI infers the variant from the text inside it?
I have the following code:
import React from 'react';
import './styles.css';
import {createMuiTheme} from '#material-ui/core/styles';
import {ThemeProvider} from '#material-ui/styles';
import Typography from '#material-ui/core/Typography';
const theme = createMuiTheme({
typography: {
h1: {
fontSize: 200,
},
h2: {
fontSize: 5,
},
},
});
export default function App() {
return (
<ThemeProvider theme={theme}>
<Typography>
<h1>Text H1</h1>
<h2>Text H2</h2>
</Typography>
</ThemeProvider>
);
}
When it renders, "Text H1" should have a font size of 200 and "Text H2" a font size of 5.
Unfortunately, it's not like that.
Only if I change the variant prop of Typography to h1 or h2, it changes the font size. As I have a long text with different variants, I don't want to create a Typography element for each of them.
Here is a code sandbox of it:
https://codesandbox.io/s/elegant-bouman-fz3j6?file=/src/App.js:0-604
If you want to override the h1/h2 of you should use the overrides option of the createMuiTheme function:
export const theme = createMuiTheme({
overrides: {
MuiTypography: {
root: {
"& h1": {
color: "blue"
},
"& h2": {
color: "red"
}
}
}
}
});
You can see a working example here: https://codesandbox.io/s/mui-theme-typography-override-styles-192jk?file=/demo.js
If I adjust the size of a button in the theme, like this:
const theme = createMuiTheme({
overrides: {
MuiButton: {
fab: {
width: 36,
height: 36,
},
},
MuiSvgIcon: {
root: {
width: 16,
},
},
},
};
Then the button and the icon appear at the size I want. However this affects all icons, whether they're inside a button or not!
How can I say that I only want the MuiSvgIcon properties to apply when the element is found inside a MuiButton element?
Well I've worked out one way to do it, but it's not ideal because it relies on the internal structure of the MuiSvgIcon. But it might serve as a starting point for someone else. Better answers are most welcome.
const theme = createMuiTheme({
overrides: {
MuiButton: {
fab: {
width: 36,
height: 36,
'& svg': {
width: 16,
},
},
},
},
};
It works by applying a style to the <svg> DOM element inside the JSX <Button variant="fab"> element.
It's not documented anywhere unfortunately, but you can use any sort of CSS selectors to help. Use the "attribute contains" pattern with the class attribute itself to target descendants:
const theme = createMuiTheme({
overrides: {
MuiButton: {
root: {
// Targets MuiSvgIcon elements that appear as descendants of MuiButton
'& [class*="MuiSvgIcon-root"]': {
width: 16
}
},
},
},
};
Note 1: Caution! Material UI minifies these classnames in prod builds by default. If you want to preserve these classnames for prod, you will need to tweak the class generator function: https://material-ui.com/customization/css-in-js/ (see dangerouslyUseGlobalCSS)
Note 2: with this pattern, occasionally you end having to use !important if there's already a competing inline style that you want to override. If you're using styled-components, you can increase the specificity by using && (see the Material UI docs).
I'm beginning to evaluate material-ui as an alternative for a project and I would like to know what is the recommended way to change the font size for a table.
Currently I'm playing with the component's sandbox (available at https://codesandbox.io/s/9onokxxn5w) but I couldn't find what to change in order to enlarge the font size.
I tried to change the theme in demo.js adding a fontSize key to the table element, as follows, but it didn't work:
const styles = theme => ({
root: {
width: '100%',
marginTop: theme.spacing.unit * 3,
overflowX: 'auto',
},
table: {
minWidth: 700,
fontSize: '40pt'
},
});
Thanks in advance for any help in figuring this out.
It seems that it does not work for Table but it works for the TabelRow or for the TableCell.
Add a class to the TableRow element and set the fontSize param on it
...
<TableRow key={n.id} className={classes.tablecell}>
...
const styles = theme => ({
tablecell: {
fontSize: '40pt',
},
});