Code Sandbox here:
https://codesandbox.io/s/ypx4qpjvpx
Relevant bits:
const styles = theme => ({
root: {
flexGrow: 1,
backgroundColor: theme.palette.background.paper
},
label: {
fontWeight: "normal"
},
selected: {
fontWeight: "bold"
}
});
<Tabs value={value} onChange={this.handleChange}>
<Tab
label="Item One"
classes={{
label: classes.label,
selected: classes.selected
}}
/>
<Tab
label="Item Two"
classes={{
label: classes.label,
selected: classes.selected
}}
/>
<Tab
label="Item Three"
href="#basic-tabs"
classes={{
label: classes.label,
selected: classes.selected
}}
/>
</Tabs>
What I'm trying to do here is I need to override the default font weight style, but on selected, I want it to be bold.
The problem is - these have the same level of specificity, and label appears after selected, so it overrides it.
How would I make selected more specific/achieve what I want without using !important.
I think the easiest way is to use the root class instead of label (for the Tab component).
Demo: https://codesandbox.io/s/q3pmn9o7m4
(I added colours to make the changes easier to see.)
<Tab
label="Item One"
classes={{
root: classes.tabRoot,
selected: classes.selected,
}}
/>
const styles = theme => ({
root: {
flexGrow: 1,
backgroundColor: theme.palette.background.paper,
},
tabRoot: {
fontWeight: "normal",
color: "#fff",
},
selected: {
fontWeight: "bold",
color: "#0ff",
}
});
A different way: https://codesandbox.io/s/8op0kwxpj
const styles = theme => ({
root: {
flexGrow: 1,
backgroundColor: theme.palette.background.paper,
},
tabRoot: {
fontWeight: "normal",
color: "#fff",
'&$selected': {
fontWeight: "bold",
color: "#0ff",
},
},
selected: {},
});
Related
I wants to create 5 custom format for any type of button(variant=outlined/contained)
I found some articles to override existing or root component style like below
export const myTheme = createTheme({
components: {
MuiButton: {
styleOverrides: {
root: {
backgroundColor: colors.yellow[500]
},
outlined: {
backgroundColor: colors.orange[500]
,'&:hover': {
backgroundColor: colors.green[500],
}
}
},
},
}
})
I would like to create a set of styles to MuiButton Variant = outlined like below,
ButtonSubmit:{
backgroundColor: colors.lightBlue[500],
color: colors.cyan[100] //Text color
'&:hover': {
backgroundColor: colors.lightBlue[100]
}
}
ButtonCancel:{
backgroundColor: colors.Orange[500],
color: colors.cyan[100] //Text color
'&:hover': {
backgroundColor: colors.Orange[100]
}
}
ButtonNav:{
backgroundColor: colors.green[500],
color: colors.cyan[100] //Text color
'&:hover': {
backgroundColor: colors.green[100]
}
}
How to apply those styles to button variant outlined
<Button variant="outlined" size='small' sx={{ height: '30px'}}>ButtonSubmit</Button>
<Button variant="outlined" size='small' sx={{ height: '30px'}}>ButtonCacel</Button>
<Button variant="outlined" size='small' sx={{ height: '30px'}}>ButtonNav</Button>
I am trying to custom style my icon adding a bigger font size, the background is working fine but the font size is not, I read that I can use important! but I want to know why it is not working as it has been working in version 4 .
const useStyles = makeStyles((theme: Theme) => ({
root: {
flexGrow: 1,
},
icon: {
fontSize: 140,
backgroundColor: 'red',
'&:hover': {
backgroundColor: 'red',
},
},
}));
<Box style={{ display: 'flex', alignItems: 'center' }}>
<EmojiObjectsIcon color='primary' className={classes.icon} onClick={switchTheme} />
</Box>
add px for fontSize like this :
const useStyles = makeStyles((theme: Theme) => ({
root: {
flexGrow: 1,
},
icon: {
fontSize: '140px',
backgroundColor: 'red',
'&:hover': {
backgroundColor: 'red',
},
},
}));
const PublicSidebar = () => {
const classes = useStyles();
return (
<Box style={{ display: 'flex', alignItems: 'center' }}>
<EmojiObjectsIcon color='primary' className={classes.icon} onClick={switchTheme} />
</Box>
)
}
I am using MaterialTable from material-table package. I want the the table to have scrollable on x-axis in order to deal with many columns. Below is the code:
<MaterialTable
title="Members Account Logs"
columns={columns}
icons={tableIcons}
data={data}
options={{
headerStyle:
{
backgroundColor: 'black',
color: 'white'
},
rowStyle:{
backgroundColor: 'white',
color: 'black'
},
}}
/>
What props should I pass to make the table scrollable on x-axis
The solution is to wrap the into the div with style as:
<div
style={{
width:'1535px',
overflowX:'auto'
}}
>
<MaterialTable
title="Members Account Logs"
columns={columns}
icons={tableIcons}
data={data}
options={{
headerStyle:
{
backgroundColor: 'black',
color: 'white'
},
rowStyle:{
backgroundColor: 'white',
color: 'black' ,
},
padding: "dense",
tableLayout: "block",
overflowX:"auto"
}}
/>
</div>
The div makes the boundaries limit for the page and hence the MaterialTable will have overflow on x-axis
Even after having read the Material UI Customization rules, I haven't quite understood how to properly target nested elements.
Here is an example, where I am targeting the label of the <TextField> component. The styling for the label works, but the styling for when the label is shrinked does not.
const useStyles = makeStyles({
label: {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
right: '22px',
bottom: '0px',
'&.MuiInputLabel-shrink': {
right: 'unset',
color: 'green',
},
'&. MuiInputLabel-shrink': {
right: 'unset',
color: 'green',
},
'&.shrink': {
right: 'unset',
color: 'green',
},
'&.shrinked': {
right: 'unset',
color: 'green',
},
},
'&.MuiInputLabel-shrink': {
color: 'purple',
},
});
To target a the class 'shrink', this would be the correct usage:
const useStyles = makeStyles({
label: {
'& .shrink': {
right: 'unset',
color: 'green',
},
},
},
If this doesn't work for you - it may be an issue of specificity. Just as a test, I'd add the '!important' flag to the css to validate that you're styles are actually being applied.
You'll also have to apply object on the 'classes' prop of the material-ui component.
Hope this helps
I can't find any documentation on how to create an icon with rectangle backgrounds like here:
There are no props for <Icon /> or <SvgIcon /> that I can find that would do this out of the box. I can style them like that myself, but was wondering if there is an existing way.
You can use the useStyles to add colors to your elements:
const useStyles = makeStyles(theme => ({
root: {
"& > svg": {
margin: theme.spacing(1)
}
},
icon1: {
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText,
borderRadius: theme.shape.borderRadius
},
icon2: {
backgroundColor: theme.palette.primary.main,
color: theme.palette.text.primary,
borderRadius: theme.shape.borderRadius
},
icon3: {
backgroundColor: theme.palette.text.primary,
color: theme.palette.primary.contrastText,
borderRadius: theme.shape.borderRadius
},
icon4: {
backgroundColor: theme.palette.text.secondary,
color: theme.palette.primary.contrastText,
borderRadius: theme.shape.borderRadius
}
}));
And inside your icon:
<div className={classes.root}>
<AddIcon fontSize="large" color="primary" className={classes.icon1} />
<AddIcon fontSize="large" color="primary" className={classes.icon2} />
<AddIcon fontSize="large" color="primary" className={classes.icon3} />
<AddIcon fontSize="large" color="primary" className={classes.icon4} />
</div>
Here is a working example: https://codesandbox.io/s/mui-icons-styling-8t4rb?file=/demo.js