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
Related
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
I am trying to use the following to update the border color of all of my outlined select, but it doesn't work (apparently the style of the border comes from fieldset element). I have tried MuiOutlinedInput but that applies tom all of the inputs. Is there a way to target just the select outlined variant?
overrides: {
MuiButton: {
outlined: {
'&:hover': {
boxShadow: 'none'
},
},
contained: {
'&:hover': {
boxShadow: 'none'
},
}
},
MuiSelect: {
root: {
'& $notchedOutline': {
borderColor: 'red',
},
}
}
}
The problem with what you tried is that the $notchedOutline element is not a descendant of the .MuiSelect-root element, but rather a sibling. The overall structure of the outlined select is roughly as follows (with less relevant details left out):
<div class="MuiFormControl-root">
<div class="MuiOutlinedInput-root">
<div class="MuiSelect-root MuiSelect-outlined MuiOutlinedInput-input">Displayed Text</div>
<input type="hidden" value="Displayed Text">
<fieldset class="MuiOutlinedInput-notchedOutline"><legend>less relevant details</legend></fieldset>
</div>
</div>
Below is an example that customizes both outlined input and outlined select using different colors.
import React from "react";
import ReactDOM from "react-dom";
import TextField from "#material-ui/core/TextField";
import MenuItem from "#material-ui/core/MenuItem";
import { createMuiTheme, MuiThemeProvider } from "#material-ui/core/styles";
const theme = createMuiTheme({
overrides: {
MuiOutlinedInput: {
root: {
"& $notchedOutline": {
borderColor: "pink"
},
"&$focused $notchedOutline": {
borderColor: "red"
},
color: "blue",
"& .MuiSelect-root ~ $notchedOutline": {
borderColor: "green"
},
"&$focused .MuiSelect-root ~ $notchedOutline": {
borderColor: "orange"
},
"& .MuiSelect-root": {
color: "purple"
}
}
}
}
});
function App() {
return (
<MuiThemeProvider theme={theme}>
<TextField
variant="outlined"
label="Outlined Input"
defaultValue="My Text"
/>
<br />
<br />
<TextField
variant="outlined"
label="Outlined Select"
select
value="My Text 1"
>
<MenuItem value="My Text 1">My Text 1</MenuItem>
<MenuItem value="My Text 2">My Text 2</MenuItem>
</TextField>
</MuiThemeProvider>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Related answers and documentation:
https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator
Global outlined override
Change outline for OutlinedInput with React material-ui
Can't change border color of Material-UI OutlinedInput
To target the Select component style using the theme of Mui v5`:
import { createTheme } from '#mui/material/styles';
export const theme = createTheme({
components: {
MuiSelect: {
defaultProps: {
variant: 'standard',
},
styleOverrides: {
}
},
}
})
Assuming prior knowledge of how to apply a theme: <ThemeProvider theme={theme}>
Where can I change the default Text Color in the Material UI Theme?
Setting primary, secondary and error works
const styles = { a: 'red', b: 'green', ... };
createMuiTheme({
palette: {
primary: {
light: styles.a,
main: styles.b,
dark: styles.c,
contrastText: styles.d
},
secondary: {
light: styles.aa,
main: styles.bb,
dark: styles.cc,
contrastText: styles.dd
},
error: {
light: styles.aaa,
main: styles.bbb,
dark: styles.ccc,
contrastText: styles.ddd,
},
...,
}
...,
}
Now, when I use a <Typography /> component, I can do this
<Typography
color='primary'
variant='h6'>
Foo
</Typography>
That gives it the color I defined in palette.primary.main.
However, when I leave the color prop empty
<Typography
variant='h6'>
Foo
</Typography>
I gives the a greyish color. Where is that color defined? Where can I define additional text colors despited primary, secondary and error?
Simplay adding another key to palette is not working...
createMuiTheme({
palette: {
...,
text1: {
light: styles.t,
main: styles.tt,
dark: styles.ttt,
contrastText: styles.tttt,
},
...
}
...
}
It is done like this.
createMuiTheme({
palette: {
...,
text: {
primary: styles.t,
secondary: styles.tt,
disabled: styles.ttt,
hint: styles.tttt,
},
...
}
...
}
Make sure that primary is a color code, not an object.
The colors can be used like so
<Typography
color='textPrimary'> // or 'textSecondary', 'hint', 'disabled'
Foo Bar
</Typography>
If you want to change the default color of the "material-ui" Typography components, you can use this kind of code.
import { createMuiTheme, ThemeProvider, Typography } from '#material-ui/core';
const MuiTheme = createMuiTheme({
typography: {
allVariants: {
color: 'red'
}
}
});
const App = () => {
return (
<ThemeProvider theme={MuiTheme}>
<Typography>Hi there</Typography>
</ThemeProvider>
);
};
export default App;
This will change the Typography components' default color to whatever you would like to be (for this example, it makes the default color red), of course it will be changed by using "color" prop in the Typography component.
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} />