How apply style for class child in override theme?
I have this code
<button class="MuiButtonBase-root-359 MuiToggleButton-root-630 MuiToggleButton-selected-632" tabindex="0" type="button" value="1">
<span class="MuiToggleButton-label-633">Jan</span>
<span class="MuiTouchRipple-root-549"></span>
</button>
Here I have 3 css class (MuiButtonBase-root, MuiToggleButton-root and MuiToggleButton-selected)
So I need to apply a custom color to label inside "selected" class. I tried this override in my theme
MuiToggleButton: {
root:{
backgroundColor: '#5f5f5f'
},
selected: {
backgroundColor: '#a1b0e2a8 !important',
label: { //this not apply to "label" inside "selected" parent
color: '#0000ff !important'
}
},
label: {
selected: { //this not work too
color: '#ff0000 !important'
},
color: '#ffffff' //this apply to all MuiToggleButton-label css class
}
}
But after run "label" inside "selected" is not recognized, only "label" white. selected > label not work.
I look explication for this but only found css styles applied directly to the component or js code for this.
There any way for do this or is better apply the old css (file) way?
Using css file this work
button[class*="MuiToggleButton-selected"] span[class^="MuiToggleButton-label"]{
color: #0000ff;
}
I appreciate any resource (book, tutorial, etc) for giving me more knowledge about this.
Tks for advance
I found a similar question here
selected: {
backgroundColor: '#a1b0e2a8 !important',
'&>span': { // I need put > after &
color: '#0000ff !important'
}
},
Related
I'm currently trying to customise the textfield of materialUI. Here is what I am trying to change
I am having difficulty trying to access and change the color of the span tag that the text resides in. At the same time, i am also having difficulty in persisting the border color when the textfield is in focus. I do not quite understand how these (peusdo selectors?) work. How & when do i nest them or use them, for that matter.
e.g.
"& .MuiOutlinedInput-root": {
"& fieldset": {
borderColor: "rgba(0, 0, 0, 0.23)" // default
},
"&.Mui-focused fieldset": {
border: "2px solid red" // focus
}
Any help would be much appreciated!
for styling the label of TextField, use the InputLabelProps and target the focused class of the label.
<TextField
InputLabelProps={{ classes: { focused: classes.labelRoot } }}
variant="outlined"
label="Colored Label"
/>
const useStyles = makeStyles((theme) => ({
labelRoot: {
"&&": {
color: "pink"
}
}
}));
In labelRoot class, "&&" is used for increasing the specificity to override the default style.
Here is the working demo:
For styling it in theme:-
const theme = createMuiTheme({
overrides: {
MuiFormLabel:{
root:{
'&$focused':{
color:'green'
}
},
}
}
});
I'm trying to use the Material UI Toggle Button kind of like a radio button to give the user 2 choices to a given question.
It's functioning mostly as expected, but when trying to adjust the style for when each toggle button is selected, I can't get the Toggle Button background color to change. I'm using the classes prop on the ToggleButton component, and using the "selected" rule within that prop.
Certain css properties (such as padding & boxShadow) are working, but others (including backgroundColor) are not. My goal is to make the Toggle button have a blue background when selected, but so far I can't get it to display differently than the darker grey background when selected.
I'm using React, along with Formik and Formik-Material-UI. Here is my code:
const useStyles = makeStyles((theme) => ({
toggleButton: {
backgroundColor: 'blue',
border: [10, 'solid', 'black'],
padding: 10,
boxShadow: [
[0, 0, 0, 1, 'blue'],
],
}
}));
export function ScheduleAndServices(props) {
const classes = useStyles(props);
return (
<Field
component={ToggleButtonGroup}
name="requestType"
type="checkbox"
exclusive
>
<ToggleButton
value="ps"
aria-label="Temporary/Occasional"
selected={values.requestType === "ps" ? true : false}
classes={{selected: classes.toggleButton}}
>Temporary/Occasional
</ToggleButton>
<ToggleButton
value="reg"
aria-label="Regular"
selected={values.requestType === "reg" ? true : false}
>Regular
</ToggleButton>
</Field>
);
}
const useStyles = makeStyles(theme => ({
ToggleButton : {
'&.MuiToggleButton-root.Mui-selected': {
backgroundColor: theme.palette.common.white,
}
}
}));
Try that in your global css or scss file:
button.MuiToggleButton-root.Mui-selected {
background-color: #1f792f !important;
border-color: #000 !important;
}
Create new class and dont forget to use !important to override the backgroundColor of "Mui-selected" class
classes= useStyle({
newClass { backgroundColor:'red!important'},
})
<ToggleButton
classes={{
selected:clasess.newClass,
.
.
.
}}
value=''
/>
Thanks for this, #ALI KARAMOOZ
If anyone is looking for a solution on MUI v5, this works too using the SX Prop.
<ToggleButton
sx={{
"&.MuiToggleButton-root.Mui-selected": {
backgroundColor: "transparent", //use the color you want
},
}}
>
My goal is when I click on a ListItem, it should change the background-color and text: "line-through". And then, if I click again, these changes should be canceled.
But it happens very strangely for me. I just can't understand why ListItem changes background-color only after I click to any place of the window? And why text into ListItem becomes crossed out only after I move pointer beyond the element
const styles = () => ({
listItem: {
borderRadius: "1em"
},
listItemDone: {
borderRadius: "1em",
backgroundColor: "#F6F6E8",
textDecoration: "line-through"
},
iconButton: {
padding: 5
},
important: {
color: "#00ACE9",
fontWeight: "bold"
}
});
class TodoListItem extends Component {
state = {
done: false
};
onClickItem = () => {
this.setState({
done: !this.state.done
});
};
render() {
const { label, important = false, classes } = this.props;
const { done } = this.state;
return (
<ListItem
onClick={this.onClickItem}
className={done ? classes.listItemDone : classes.listItem}
button
divider
>
<ListItemText
primary={label}
classes={{ primary: important ? classes.important : "" }}
/>
</ListItem>
);
}
}
Whenever you are trying to override Material-UI styles and it isn't working like you would expect, the best resource is the source code. Here is the URL for the ListItem source code: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/ListItem/ListItem.js. For the most part, you only need to look at the styles variable near the top of the source file.
Below I've copied all of the portions of the styles variable that deal with backgroundColor and textDecoration:
export const styles = theme => ({
/* Styles applied to the (normally root) `component` element. May be wrapped by a `container`. */
root: {
textDecoration: 'none',
'&$selected, &$selected:hover, &$selected:focus': {
backgroundColor: theme.palette.action.selected,
},
},
/* Styles applied to the inner `component` element if `button={true}`. */
button: {
transition: theme.transitions.create('background-color', {
duration: theme.transitions.duration.shortest,
}),
'&:hover': {
textDecoration: 'none',
backgroundColor: theme.palette.action.hover,
// Reset on touch devices, it doesn't add specificity
'#media (hover: none)': {
backgroundColor: 'transparent',
},
},
'&:focus': {
backgroundColor: theme.palette.action.hover,
},
},
/* Styles applied to the root element if `selected={true}`. */
selected: {},
});
The main styles causing difficulty are the button hover and focus styles. In order to override these successfully without resorting to "!important", you need to have the appropriate CSS specificity.
The following seems to do the trick:
listItemDone: {
borderRadius: "1em",
"&,&:focus,&:hover": {
backgroundColor: "#F6F6E8",
textDecoration: "line-through"
}
},
However, the above prevents there from being any hover effect on "done" items, so you may instead want to do something more like:
listItemDone: {
borderRadius: "1em",
"&,&:focus": {
backgroundColor: "#F6F6E8",
textDecoration: "line-through"
},
"&:hover": {
textDecoration: "line-through"
}
},
This allows the hover background color of done items to still be theme.palette.action.hover. If you want the hover color to be different for done items, you can specify it explicitly along with the textDecoration.
There is one other detail to take care of. If you click a list item to put it in a "done" state and then click it again, it will not be in the "done" state anymore but it will have the button focus styles applied. In order to remove that focus styling, you also need the following:
listItem: {
borderRadius: "1em",
"&,&:focus": {
backgroundColor: theme.palette.background.paper // or whatever color you want this to be
}
},
Here is my modified version of your sandbox:
So I've tried to add !important to this styles and it started working as expected:
listItemDone: {
borderRadius: "1em",
backgroundColor: "#F6F6E8 !important",
textDecoration: "line-through !important"
},
demo.
It looks like this material-ui just overrides your styles (textDecoration and backgroundColor) when you hover over elements. Hope that helps.
Currently I am struggling with setting the background color of a MenuItem component which is selected to a different color. (without having to using !important to force it)
The component code:
<MenuItem
classes={{
root: this.props.classes.root,
selected: this.props.classes.selected
}}
value={10}>
Alfabetical
</MenuItem>
This is the css:
const homePageStyle = (theme) => ({
root: {
width: "300px"
},
selected: {
backgroundColor: "turquoise !important",
color: "white",
fontWeight: 600
}
});
What do I want to achieve?
I would like to set the backgroundColor of the MenuItem without having to set the !important flag. I've done that with plenty of components but this seems not work around at the moment.
I am using version "#material-ui/core": "^1.0.0-rc.0",
I just made a working example here
For your selected class to be taken into account, you have to set the selected property of your MenuItem component to true
<MenuItem
onClick={this.handleClose}
selected
classes={{ selected: classes.selected }}
>
I'm doing it this way to change the MenuItem background of selected. (selected prop provided by material UI).
export default createMuiTheme({
overrides: {
MuiMenuItem: { // For ListItem, change this to MuiListItem
root: {
"&$selected": { // this is to refer to the prop provided by M-UI
backgroundColor: "black", // updated backgroundColor
},
},
},
},
});
These are the defaults that can be overridden https://material-ui.com/customization/default-theme/#default-theme
Reference: https://material-ui.com/customization/components/#global-theme-override
Note: I'm using Material-UI version 4.9.11
In MUI v5, this is how you do it:
<Select
MenuProps={{
sx: {
"&& .Mui-selected": {
backgroundColor: "pink"
}
}
}}
>
Live Demo
You can updated your styles to this:
const homePageStyle = (theme) => ({
root: {
width: "300px"
},
selected: {
'&.Mui-selected': {
backgroundColor: "turquoise",
color: "white",
fontWeight: 600
}
}
});
This is because of how material-ui styles this component: .MuiListItem-root.Mui-selected
The specificity of those two classes is taking priority over the provided override.
To customize component style in Mui v5, you can try this:
MuiListItemButton: {
styleOverrides: {
root: {
'&.Mui-selected': {
backgroundColor: '#e44444',
}
}
},
},
You'll want to use MuiListItemButton component, because "selected" is deprecated in MuiListItem.
Customizing components: https://mui.com/material-ui/customization/theme-components/
Hi and thanks for the great job here. I am using react.js for my project to build my components and I feel a little bit stuck in my project right now. I am trying to style a button with a hover function and I don't know how to apply this to react.
Here is the code :
let button = {
backgroundColor: colorPalette.white,
border: "1px solid rgb(12,106,145)",
color: colorPalette.brandCol1,
textAlign: 'center',
textDecoration: 'none',
fontSize : 'inherit',
fontWeight : 600,
padding : "5px 8px 5px 8px"
}
and I would like to add a hover style to it just like we do in css with
button:hover {
style here.......
}
What is the correct syntax ?
You can use:
const styles = {
myStyleClassName: {
padding: '16px 0px 16px 0px',
'& a': {
textDecoration: 'none',
color: '#0000ee',
},
'& a:hover': {
textDecoration: 'underline',
},
},
myButtonClass: {
'&:hover': {
textDecoration: 'underline',
},
},
};
....
render() {
<span className={myStyleClassName}><a tag><button><someDomObjct></span>
<button className={myButtonClass}>my label</button>
}
See: http://cssinjs.org/jss-nested/?v=v6.0.1
The repo isn't necessary for everything, the above should work out of the box.
You can use onMouseEnter onMouseLeave to adjust the state of the component
<button
onMouseEnter={() => setButtonHovered(true)}
onMouseLeave={() => setButtonHovered(false)}
className={buttonIsHovered ? 'hover' : null}
/>
see here for more info
or just use a css class?
import './style.css'
<button className="Button"/>
.Button:hover {
...
}
Using react to manage state for a hover animation is way overkill. You shouldn't need to use javascript for a simple CSS hover...You're in the browser, use the right tool for the right job, right?
So here I'll show a couple different ways to approach the same goal:
In my component I import glamor and my styles file:
import { style } from 'glamor';
import styles from '../styles';
And in my styles file, I have something like this:
import { style } from 'glamor';
const styles = {
redHoverbutton: style({
backgroundColor: "#aaaaaa",
fontSize: "1.1rem",
transition: "all ease .5s",
":hover": {
backgroundColor: "#ff0000",
color: "#ffffff"
}
})
};
export default styles;
And this makes the hover functionality work via css, like this:
<div {...styles.redHoverbutton}></div>
This is a css driven hover effect (with transition if you noticed) but this isn't inline css. None the less, your style can be crafted in the same file, like this:
let theStyle = style({ backgroundColor: "#aaaaaa",transition: "all ease .5s", ":hover": { cursor: "pointer", backgroundColor: "#ffff9b", color: "#fd0808" } });
return (<div {...theStyle}>Hover me!</div>);
Now, how to get the style and the spread operator onto the same line and inside of the JSX element?
<div {...style({ backgroundColor: "#aaaaaa", height: "30px", width: "100%", padding: "6px", fontsize: "16px", transition: "all ease .5s", ":hover": { cursor: "pointer", backgroundColor: "#ffff9b", color: "#fd0808" } })}>Hover Me!</div>
It may not be perfect but it works well and accomplished the same thing as a true inline style and in a similar manner.