What can i do to make my makestyles classes more important than default material ui style?
That's my code:
import { createTheme, ThemeProvider } from '#mui/material/styles';
import { makeStyles, createStyles } from '#mui/styles';
const customTheme = createTheme({
palette: {
primary:{
main: '#303030',
},
},
components:{
MuiButton:{
styleOverrides: {
root: {
'&:focus': {
background: "#f00",
},
'&:hover': {
background: "#f00",
},
'&::after': {
content: '"xd"',
color: 'blue',
},
},
contained:{
borderRadius:'50%',
},
},
variants: [
{
props: { variant: 'dashed' },
style: {
textTransform: 'none',
border: `2px dashed #000000`,
},
},
],
},
},
});
const useStyles = makeStyles((theme) =>
//I tried without createStyles too, no change
createStyles({
root: {
},
differentButton:{
backgroundColor: 'green',
fontSize: '30px',
opacity: '80%',
},
//tak sie propsy przekazuje
foo: (props) => ({
backgroundColor: props.backgroundColor,
}),
}),
);
function App() {
const classes = useStyles();
return (
<>
<CssBaseline/>
<Button className={classes.differentButton}>Different</Button>
<RemoveButton variant="contained">Remove Button</RemoveButton>
<ThemeProvider theme={customTheme}>
<Button className={classes.differentButton}>Different</Button>
</ThemeProvider>
</>
);
}
Its overrided by something (default material ui style i think so)
Does it means that with customizing material ui components i can't use makeStyles? I know that i can do that with styled() too but makeStyles way seems better to me.
Ps. I dont want to use !important everywhere hah
There are several solutions.
You can use withStyles, mui v4
withStyles
Use emotion style by styled
styled
Also you can use !important in material-ui
Related
I'm trying to apply a custom color to a Button using createMuiTheme and ThemeProvider, and it works when using palette primary and secondary, but when i try to use any other, like "info", it doesnt work:
Anyone know what im doing wrong or any other way to go about this?
primary and secondary attributes are the only ones recognized in palette object.
You are trying to create a custom variant.
Creating a custom variant is supported in the latest version(Above v5) of material-UI.
import { createMuiTheme } from '#material-ui/core/styles';
const theme = createMuiTheme({
components: {
MuiButton: {
variants: [
{
props: { variant: 'twitter' },
style: {
backgroundColor: '#00acee',
color: '#FFFFFF',
"&:hover": {
backgroundColor: "#007cad",
},
},
},
{
props: { variant: 'facebook' },
style: {
backgroundColor: '#3b5998',
color: '#FFFFFF',
"&:hover": {
backgroundColor: "#314c85",
},
},
},
],
},
},
});
export default theme
UI
<Grid item>
<Button variant="facebook" startIcon={<FacebookIcon />}>Facebook</Button>
</Grid>
<Grid item>
<Button variant="twitter" startIcon={<TwitterIcon />}>Twitter</Button>
</Grid>
Here is the link that will help
https://github.com/mui-org/material-ui/issues/15573
https://github.com/mui-org/material-ui/issues/15573#issuecomment-724114107
I'm not sure why I can't get this to work. I'm selecting the MuiInputBase-root element, telling it to select the field and set the border color to blue, and on focus set the border color to red. What am I doing wrong here?
Codesandbox
import React from "react";
import "./styles.css";
import { makeStyles } from "#material-ui/core/styles";
import FormControl from "#material-ui/core/FormControl";
import OutlinedInput from "#material-ui/core/OutlinedInput";
import InputLabel from "#material-ui/core/InputLabel";
const useStyles = makeStyles(theme => ({
root: {
width: "20rem"
},
label: {
background: "white",
paddingRight: theme.spacing(0.5),
"&.Mui-focused": {
color: theme.palette.secondary.main
}
},
closeIcon: {
color: theme.palette.grey[400],
"&.hidden": {
display: "none"
}
},
searchIcon: {
color: theme.palette.primary.main
}
}));
const useOutlinedInputStyles = makeStyles({
root: {
"& .MuiInputBase-root": {
"& fieldset": {
borderColor: "blue"
},
"&.Mui-focused fieldset": {
borderColor: "red"
}
}
}
});
export default function App() {
const classes = useStyles();
const outlinedInputStyles = useOutlinedInputStyles();
return (
<div className="App">
<FormControl className={classes.root} variant="outlined">
<InputLabel className={classes.label} htmlFor="search-input">
placeholder
</InputLabel>
<OutlinedInput
classes={outlinedInputStyles}
id="search-input"
labelWidth={70}
/>
</FormControl>
</div>
);
}
The issue is that the .MuiInputBase-root is not a child of the root element (the .MuiOutlinedInput-root element), it's actually exactly the same element, so that layer is unnecessary. Also, type selectors (e.g. fieldset) have lower specificity than class selectors, so &.Mui-focused fieldset does not have sufficient specificity to override the default focused styles. Instead of fieldset you can use the class selector .MuiOutlinedInput-notchedOutline.
So instead of:
root: {
"& .MuiInputBase-root": {
"& fieldset": {
borderColor: "blue"
},
"&.Mui-focused fieldset": {
borderColor: "red"
}
}
}
You should have:
root: {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "blue"
},
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderColor: "red"
}
}
Related answer: Change border color on Material-UI TextField
I want to change Material UI Slider component color
I have tried to change CSS style and it's not working, then I tried the solution given in this issue and applied this code but it's not working
getMuiTheme:
const muiTheme = getMuiTheme({
slider: {
trackColor: "yellow",
selectionColor: "green"
}
});
and in Component:
<MuiThemeProvider muiTheme={muiTheme}>
<Slider
min={18}
max={90}
ValueLabelComponent={ValueLabelComponent}
defaultValue={40}
/>
</MuiThemeProvider>
It depends what version of Material-UI you are using.
Your code matches Material-UI v0.x:
import React from 'react';
import Slider from 'material-ui/Slider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import { MuiThemeProvider } from 'material-ui';
const muiTheme = getMuiTheme({
slider: {
trackColor: "yellow",
selectionColor: "red"
}
});
export default function V0Slider() {
return (
<MuiThemeProvider muiTheme={muiTheme}>
<Slider
min={18}
max={90}
ValueLabelComponent={0}
defaultValue={40}
/>
</MuiThemeProvider>
);
}
If you are using Material-UI v4, that would be the way to go:
import React from "react";
import Slider from '#material-ui/core/Slider';
import { createMuiTheme } from '#material-ui/core/styles';
import { ThemeProvider } from '#material-ui/styles';
const muiTheme = createMuiTheme({
overrides:{
MuiSlider: {
thumb:{
color: "yellow",
},
track: {
color: 'red'
},
rail: {
color: 'black'
}
}
}
});
export default function V4Slider() {
return (
<ThemeProvider theme={muiTheme}>
<Slider min={18} max={90} defaultValue={40} />
</ThemeProvider>
);
}
If you are using another version of material-ui, let me know which one and i'll try to help.
I did the override with the 'withStyles' of material-ui v4.
This is for the Slider styles :
const CustomSlider = withStyles({
root: {
color: "#6f8eff",
height: 3,
padding: "13px 0",
},
track: {
height: 4,
borderRadius: 2,
},
thumb: {
height: 20,
width: 20,
backgroundColor: "#fff",
border: "1px solid currentColor",
marginTop: -9,
marginLeft: -11,
boxShadow: "#ebebeb 0 2px 2px",
"&:focus, &:hover, &$active": {
boxShadow: "#ccc 0 2px 3px 1px",
},
color: "#fff",
},
})(Slider);
And just after that render your slider :
<CustomSlider
value={value}
onChange={handleChange}
step={20} />
And Color should update, i also update the thumbs here for custom thumbs.
Hope it's helps : )
I'm having a bit of difficulties with the theming in Material-UI when it comes to coloring elements. Some elements automatically choose 'theme.palette.main.dark'. I want to know how to force them not to.
For instance the TextField and SpeedDial components automatically choose the dark property from the theme. I've tried to just remove the dark property, but than the TextField is black and the text inside the TextField is unreadable.
My theme file is configured as following:
import {createMuiTheme} from "#material-ui/core";
import {green, indigo, red} from "#material-ui/core/colors";
const theme = createMuiTheme({
palette: {
primary: {
main: indigo.A200,
dark: green.A100
},
white: {
text: '#fff',
},
secondary: {
main: red.A100,
dark: green.A100,
}
}
});
export default theme;
I expect the TextField and SpeedDial to choose the primary color but the actual outcome is that they choose the dark property, probably because it would otherwise interfere with people not being able to see the component properly, but I want to custom choose the colors. I haven't been able to find an explanation on how to change the color for the underline and the float in the TextField component.
https://codesandbox.io/s/material-demo-o52c8
Below is an example with many obnoxious colors on the different aspects of the TextField.
import React from "react";
import ReactDOM from "react-dom";
import TextField from "#material-ui/core/TextField";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles({
root: {
color: "white",
backgroundColor: "fuchsia",
"&.Mui-focused": {
color: "orange",
backgroundColor: "pink"
},
"&:before": {
borderBottomColor: "blue"
},
"&:hover:not(.Mui-focused):before": {
borderBottomColor: "green"
},
"&:after": {
// focused
borderBottomColor: "purple"
}
},
input: {
"&::selection": {
backgroundColor: "lightgreen",
color: "black"
}
}
});
const useLabelStyles = makeStyles({
root: {
color: "brown",
"&.Mui-focused": {
color: "aqua"
}
}
});
function App() {
const classes = useStyles();
const labelClasses = useLabelStyles();
return (
<div className="App">
<TextField
InputProps={{ classes: classes }}
InputLabelProps={{ classes: labelClasses }}
label="label"
defaultValue="text"
/>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Here's the same look, but controlled via the theme:
import React from "react";
import ReactDOM from "react-dom";
import TextField from "#material-ui/core/TextField";
import { createMuiTheme, ThemeProvider } from "#material-ui/core/styles";
const theme = createMuiTheme({
overrides: {
MuiInput: {
root: {
color: "white",
backgroundColor: "fuchsia",
"&.Mui-focused": {
color: "orange",
backgroundColor: "pink"
},
"&:before": {
borderBottomColor: "blue"
},
"&:hover:not(.Mui-focused):before": {
borderBottomColor: "green"
},
"&:after": {
// focused
borderBottomColor: "purple"
}
},
input: {
"&::selection": {
backgroundColor: "lightgreen",
color: "black"
}
}
},
MuiInputLabel: {
root: {
color: "brown",
"&.Mui-focused": {
color: "aqua"
}
}
}
}
});
function App() {
return (
<ThemeProvider theme={theme}>
<div className="App">
<TextField label="label" defaultValue="text" />
</div>
</ThemeProvider>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Related answers:
How do I custom style the underline of Material-UI without using theme?
How can I change the label size of a material ui TextField?
Change InputLabel color of a Select component when clicked/focused
Change outline for OutlinedInput with React material-ui
I am trying to learn material ui.
I am trying to change the css of the loading bar.
I referred to the documentation and used colorPrimary classes
but its not changing.
can you tell me how to fix it so taht in future I will fix it myself
providing my code snippet below.
all my code is in ReceipeReviewCardList.js
https://codesandbox.io/s/2zonj08v5r
const styles = {
root: {
flexGrow: 1
},
colorPrimary: {
color: "green"
}
};
render() {
const { classes } = this.props;
return (
<div className={classes.root}>
<LinearProgress
className={classes.colorPrimary}
variant="determinate"
value={this.state.completed}
you can use example as was in the reply of the issue in material ui github project: https://github.com/mui-org/material-ui/issues/12858#issuecomment-421150158
import React, { Component } from 'react';
import { withStyles } from '#material-ui/core/styles';
import { LinearProgress } from '#material-ui/core';
class ColoredLinearProgress extends Component {
render() {
const { classes } = this.props;
return <LinearProgress {...this.props} classes={{colorPrimary: classes.colorPrimary, barColorPrimary: classes.barColorPrimary}}/>;
}
}
const styles = props => ({
colorPrimary: {
backgroundColor: '#00695C',
},
barColorPrimary: {
backgroundColor: '#B2DFDB',
}
});
export default withStyles(styles)(ColoredLinearProgress);
It works perfect.
You can override the background colors with makeStyles.
On makeStyles file:
export const useStyles = makeStyles(() => ({
root: {
"& .MuiLinearProgress-colorPrimary": {
backgroundColor: "red",
},
"& .MuiLinearProgress-barColorPrimary": {
backgroundColor: "green",
},
},
})
Import and use:
import { useStyles } from "./myFile.style";
...
const classes = useStyles();
...
<div className={classes.root}>
<LinearProgress />
</div>
It is because you set the CSS is not correctly,
const styles = {
root: {
flexGrow: 1
},
colorPrimary: {
background: 'green'
}
};
not:
const styles = {
root: {
flexGrow: 1
},
colorPrimary: {
color: "green",
}
};
Hope it help!
If you want to overwrite with sx:
sx={{
'& .MuiLinearProgress-bar1Determinate': {
backgroundColor: 'red',
}
}}
the color of the main bar is set as the BACKGROUNDCOLOR, NOT the COLOR
For Material UI v5 (#mui)
<LinearProgress sx={{
backgroundColor: 'white',
'& .MuiLinearProgress-bar': {
backgroundColor: 'green'
}
}}
variant="determinate"
value={10}/>
I did do it by this way, creating your own theme
import {createMuiTheme, MuiThemeProvider } from '#material-ui/core/styles';
const theme = createMuiTheme({
palette: {
secondary: {
main: '#42baf5'
}
}
})
<MuiThemeProvider theme={theme}>
<LinearProgress color="secondary"/>
</MuiThemeProvider>
An easy workaround i stumbled upon which doesn't seem too much of a hack:
<LinearProgress
className="VolumeBar"
variant="determinate"
value={volume}
/>
.VolumeBar > * { background-color:green; }
.VolumeBar{background-color:gray ;}
The first rule makes the progress appear green(completed part).
The second rule takes care of the uncompleted part .
const BorderLinearProgress = withStyles((theme: Theme) =>
createStyles({
root: {
width: '95%',
height: 10,
borderRadius: 5,
marginTop: 8,
marginBottom: 20
},
colorPrimary: {
backgroundColor: Liquidity.colors.main.pink,
},
bar: {
borderRadius: 5,
backgroundColor: Liquidity.colors.main.yellow,
},
}),
)(LinearProgress);
This worked for me (Material ui version 4):
progressbar: {
background: 'yellow',
'& .MuiLinearProgress-bar': {
backgroundColor: theme.palette.success.main,
},
},
And then
<LinearProgress
className={classes.progressbar}
variant="determinate"
value={30}
/>
That have worked for me !
First set a className to the LinearProgress component
<LinearProgress
className="custom-class"
variant="determinate"
value={MyValue}
/>
then style it from your attached css file as shown in the following :
.custom-class > * { background-color:green !important; }
.custom-class{background-color:gray !important;}
using the !important tag is premordial to override the original color.
style: progress: { color: 'red' },
Component:
<LinearProgress color="inherit" className={classes.progress} />