<Button variant="contained" color="success">save</Button>
<Button variant="contained" color="error">delete</Button>
Both buttons show the default color.
Most components behave the same way: success, info... none of them work as I expect them to.
I know this is not a bug, according to the API documentation, MaterialUI's components simply don’t recognize other palette's colors at all, but this bugs me.
Why components only recognize primary and secondary colors?
How should I use the colors of my theme.palette so that they are applied to my components?
Is changing the theme my only option to achieve the effect I am looking for?
According to the Button API documentation, the accepted values for the color prop are 'default', 'inherit', 'primary' and 'secondary' only. Therefore, Material UI will not recognize color='success' nor color='error' and show the corresponding colors.
I assume you are trying to use the success and error colors from the default theme. In the default theme object, the colors for success and error can be found in theme.palette.success and theme.palette.error respectively.
Therefore, we can access the default theme colors using the following way:
const useStyles = makeStyles((theme) => ({
success: {
backgroundColor: theme.palette.success.main
},
error: {
backgroundColor: theme.palette.error.main
}
}));
export default function ContainedButtons() {
const classes = useStyles();
return (
<div>
<Button variant="contained" classes={{ root: classes.success }}>
Save
</Button>
<Button variant="contained" classes={{ root: classes.error }}>
Delete
</Button>
</div>
);
}
Related
there is that annoying black outline that appears in my material Ui autocomplete component on hover and I cannot even find in the css to remove it. I feel like I've tried everything. Does somebody have an idea about it? It just doesn't match the style of my project and the whole page looks bad because of it.
You can override the input component using "renderInput". This will allow you to provide a custom input component that does not have the hover effect.
Docs: https://mui.com/material-ui/react-autocomplete/#custom-input
<Autocomplete
sx={{
display: 'inline-block',
'& input': {
width: 200,
bgcolor: 'background.paper',
color: (theme) =>
theme.palette.getContrastText(theme.palette.background.paper),
},
}}
id="custom-input-demo"
options={options}
renderInput={(params) => (
<div ref={params.InputProps.ref}>
<input type="text" {...params.inputProps} />
</div>
)}
/>
I struggled a lot to remove the hover effect too. In my case could chaneg it using the .MuiInput-underline:hover:not(.Mui-disabled):before selector. I think in your case you could do something like
.MuiInput-underline:hover:not(.Mui-disabled):before {
border-bottom: 0 !important;
}
or something among those lines. Hope that helps.
I am trying to use material ui component into react class based component material ui component demo everthing wrtten function based but we are written all project pages are class based very difficult to integrating material UI component
It is not difficult to integrate on class-based Components. yes, In Material UI doc all the things have integrated on functional-based Components with using Hooks. But you should have some Knowledge about hooks and state concepts then you can easily be integrated them.
for example:
export default function AlertDialog() {
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<div>
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
Open alert dialog
</Button>
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{"Use Google's location service?"}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Let Google help apps determine location. This means sending anonymous location
data to
Google, even when no apps are running.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
Disagree
</Button>
<Button onClick={handleClose} color="primary" autoFocus>
Agree
</Button>
</DialogActions>
</Dialog>
</div>
);
}
So, this Dialog Code has written in functional Based Components But we can easily integrated on class based component Like:
export default class AlertDialog extends React.Components{
constructor(){
super(props)
this.state={
open:false
}
}
handleClickOpen = () => {
this.setState({open:true})
};
handleClose = () => {
this.setState({open:false})
};
render(){
return (
<div>
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
Open alert dialog
</Button>
<Dialog
open={this.state.open}
onClose={this.handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{"Use Google's location service?"}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Let Google help apps determine location. This means sending anonymous location
data to
Google, even when no apps are running.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={this.handleClose} color="primary">
Disagree
</Button>
<Button onClick={this.handleClose} color="primary" autoFocus>
Agree
</Button>
</DialogActions>
</Dialog>
</div>
);
}
}
So, just we should have Knowledge about basic React Concept and you can do this.
const styles = {
bgColor:{
backgroudColor: '#f9a825'
}
}
<Button color='primary' classes={fab:classes.bgColor} variant="fab" aria-label="Checkout"> Click Here </Button>
Here, I want to change the background-color. its applying, but it giving priority to Theme css.
The classes prop is applied incorrectly.
You shouldn't even use classes since you don't seem to inject any; you should use style.
<Button color="primary"
style={styles.bgColor}
variant="fab"
aria-label="Checkout">
Click Here
</Button>
If you indeed inject classes into you component, you use it like this:
<Button color="primary"
classes={{ fab: classes.bgColor }}
variant="fab"
aria-label="Checkout">
Click Here
</Button>
I'm using Material-UI. As it supports CSS styling with JSS, I'm struggling to access rule names in a different component. As you see the below codes, MyComponent uses AppBar component and I need to access rule names in AppBar component. However, for some reason I can't access the rule names in it.
MyComponent.js
<div id="navigation-pills">
<div className={classes.root}>
<AppBar position="static" color="default">
<Tabs
...
>
...
</Tabs>
</AppBar>
</div>
</div>
styles.js
const styles = theme => ({
...
root: {
flexGrow: 1,
width: "100%",
backgroundColor: theme.palette.background.paper,
"& $flexContainer": {
display: "none"
}
},
...
});
JSS API says that I can access child rule names with $, but it doesn't work for some reason.
L
Like you see the below image, I would like to access flexContainer rule name on line 7.
It can only reference a rule from the same style sheet (styles object). In your code I can't tell, because you replaced it with "...".
Hi I want to style three buttons with different colors but When those buttons are disabled the custom style I've added at the beginning overrides the default style disabledTextColor, which adds a default fade and transparency value, so users can see that the button is disabled. How can style the disabled state or which should be the correct way to style the labelStyle and/or disabledTextColor? Here is an example
const style = {
labelStyle: {
color: 'red;
}
}
<FlatButton
label='Mit Linkedin anmelden'
labelPosition='after'
icon={<LinkedinIcon />}
onClick={() => Meteor.loginWithLinkedin()}
disabled={true}
labelStyle={style.labelStyle}
/>
</div>
<div className='mdl-cell mdl-cell--12-col'>
<FlatButton
label='Mit Google anmelden'
labelPosition='after'
icon={<GoogleIcon />}
onClick={() => Meteor.loginWithGoogle()}
disabled={true}
labelStyle={style.labelStyle}
/>
</div>
in this case the button always stays red even though the disabled state in True
You can create a little wrapper component around FlatButton that conditionally fades the labelStyle when the button is disabled.
const CustomFlatButton = (props) => (
<FlatButton
{...props}
labelStyle={{ ...props.labelStyle, opacity: props.disabled ? 0.3 : 1 }}
/>
);
...
<CustomFlatButton label="Disabled Red" style={{ color: 'red' }} disabled />
https://jsfiddle.net/6rads3tt/2/