I have a style for a standard list
export const useOverrides = makeStyles({
list: {
...shorthands.padding("2px", "4px", "8px", "30px"),
},
I add it to the list
<ul className={list}>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
How do I select the li component or any children using normal scss creating the style would be simple.
ul {
padding: 20px;
li {
color: red
}
}
Can I not target child selectors in this way with griffel?
list: {
...shorthands.padding("2px", "4px", "8px", "30px"),
li: {
color: "red",
},
},
You have to use the & as reference to the current element:
list: {
...shorthands.padding("2px", "4px", "8px", "30px"),
'& li': {
color: "red",
},
// or even more specific:
'& > li': {
color: "red",
},
},
You can see and try it out yourself here: https://griffel.js.org/try-it-out#nested
Related
i am declaring css style with js, how to add :hover selector to cn_app_card ?
export var card_style = {
cn_app_card: {
width: 200,
height: 508,
}
};
Try adding a &:hover object with the apropiate stylings:
export var card_style = {
cn_app_card: {
width: 200,
height: 508,
"&:hover": {
backgroundColor: "red",
transform: "scale(1.1)",
},
},
};
const formContainer = {
maxWidth: "300px",
backgroundColor: '#FD439B',
padding: "10px",
"& textarea" : {
width: '100%',
padding: '15px',
margin: '5px 0 22px 0',
border: "none",
background: '#F1F1F1',
resize: "none",
minHeight: '200px'
},
"& focus" : {
backgroundColor: '#ddd',
outline: 'none'
};
JS Code :
<div class="formContainer" style={formContainer}>
With this code only formContainer maxWidth,backgroundColor,padding is appending ,remaining code like textarea,focus styles are not coming.
do it with Material-UI styles :
import React from "react";
import { withStyles } from "#material-ui/core/styles";
const styles = theme => ({
root: {
maxWidth: "300px",
backgroundColor: '#FD439B',
padding: "10px",
"& textarea" : {
width: '100%',
padding: '15px',
margin: '5px 0 22px 0',
border: "none",
background: '#F1F1F1',
resize: "none",
minHeight: '200px'
},
"& textarea:focus" : {
backgroundColor: '#ddd',
outline: 'none'
}
}
});
function TypographyTheme(props) {
return (
<div className={props.classes.root} contenteditable="false">
<textarea>
"This div's text looks like that of a button.
</textarea>
</div>
);
}
export default withStyles(styles)(TypographyTheme);
Demo
I'm using Material UI with React for the first time. I want to change my global theme, but what I want to change has two classes:
.MuiListItem-root.Mui-selected, .MuiListItem-root.Mui-selected:hover {
background-color: rgba(0, 0, 0, 0.08);
}
How can I select them with createMuiTheme? I've tried this:
createMuiTheme({
overrides: {
MuiListItem: {
root: {
Mui: {
selected: {
backgroundColor: "black",
"&:hover": {
backgroundColor: "blue",
},
},
},
},
},
}
})
Thank you in advance
Here's the correct syntax:
const theme = createMuiTheme({
overrides: {
MuiListItem: {
root: {
"&.Mui-selected": {
backgroundColor: "black",
"&:hover": {
backgroundColor: "blue"
}
}
}
}
}
});
It is also equivalent to do:
const theme = createMuiTheme({
overrides: {
MuiListItem: {
root: {
"&$selected": {
backgroundColor: "black",
"&:hover": {
backgroundColor: "blue"
}
}
}
}
}
});
Just try this code
createMuiTheme({
overrides: {
MuiListItem: {
root: {
'&$selected': {
backgroundColor: "black"
},
'&$selected:hover'{
backgroundColor: "blue"
}
},
},
},
})
and look to this response
Material UI adds the global Mui-selected classes to make it easier to change specific elements globally.
However, you should just be targeting the MuiListItem classes according to the docs like so:
createMuiTheme({
overrides: {
MuiListItem: {
selected: {
backgroundColor: "black",
"&:hover": {
backgroundColor: "blue",
},
},
},
}
})
I see that this doesn't work anymore in the current version of Material UI. In the source code of the ListItem component, it is now defined like so:
root: {
'&$selected, &$selected:hover': {
backgroundColor: theme.palette.action.selected,
},
...
}
Is there a way to change the style of all e.g. h6 children in reactjs/material-ui, without theming?
I tried the following and some others:
const useStyles = makeStyles({
someClass: {
h6: {
fontSize: "0.5rem !important",
},
}
});
function functionA() {
const classes = useStyles();
return(
<div className={classes.someClass}>
<Typography variant="h6">foobar</Typography>
</div>
)
}
P.S. I don't want to set a className for every child since this is really a big text.
use & parent selector any h6 tag under someClass fontsize will increase will be 0.5rem
const useStyles = makeStyles({
root: {
"& h6": {
fontSize: "0.5rem !important",
},
},
});
I am trying to adjust the padding of MUI Table.
last-child gets padding 24px which I want to adjust. I have tried to override the theme and to use classes{{root: classes.xxx}} but am not able to change it.
Below is the code I used for overriding the theme (I have also tried to override MuiTableRow and MuiTableColumn):
const theme = createMuiTheme({
overrides: {
MuiTableCell: {
root: {
paddingTop: 4,
paddingBottom: 4,
'& $lastChild': { paddingRight: '5px' },
},
paddingDefault: {
padding: '40px 12px 40px 16px',
},
},
},
});
This is the CSS that I am trying to change (the last cell of each row in the table):
.MuiTableCell-root-511:last-child {
padding-right: 24px;
}
Hope someone can give a helping hand.
Thats the right approach, you just have a few syntax errors in your JSS.
The last child selector should be:
'&:last-child': {}
Here a complete example
const theme = createMuiTheme({
overrides: {
MuiTableCell: {
root: {
paddingTop: 4,
paddingBottom: 4,
"&:last-child": {
paddingRight: 5
}
}
}
}
});
For those who don't want to override theme, you can achieve the same result by providing classes object prop as shown here.
const useStyles = makeStyles({
cell: {
'&:last-child': {
paddingRight: 5,
},
},
});
Provide it to your TableCell as usual;
<TableCell className={classes.cell}>
This will override the &:last-child attribute of your cell. I've found this method to be a little more convenient when I'm not changing anything else in the theme.
In MUI v5, you can use the sx prop and select the last TableCell like this:
<Table
sx={{
'& .MuiTableCell-root:last-child': {
bgcolor: 'pink',
},
}}
>
Or if you want to use createTheme() to override globally:
const theme = createTheme({
components: {
MuiTableCell: {
styleOverrides: {
root: {
'&:last-child': {
backgroundColor: 'tomato',
},
},
},
},
},
});
Live Demo