I want to change Chip's background color when it's variants value is 'filled' because the default light gray doesn't feel satisfactory.
I read MUI docs and Chip API but it's too complicated for me..
You could make use of Chip's exported CSS classes
import Chip, { chipClasses } from "#mui/material/Chip";
import { styled } from "#mui/material/styles";
// ..
const CustomChip = styled(Chip)({
[`&.${chipClasses.filled}`]: {
backgroundColor: "red"
}
});
Codesandbox demo
Related
I am using #mui/material with React + Typescript.
I want to change the warning color of the button by creating a custom theme but so far without success.
My _app.tsx
import {ThemeProvider as MaterialThemeProvider, StyledEngineProvider} from '#mui/material/styles';
import {createTheme} from '#mui/material';
import {green} from '#mui/material/colors';
import { AppProps } from 'next/app';
import Button from '#mui/material/Button';
const MyApp = function ({Component, pageProps}: AppProps) {
const MaterialUiLight = createTheme({
palette: {
warning: {
light: green[500],
main: green[500],
},
},
});
return <StyledEngineProvider injectFirst>
<MaterialThemeProvider theme={MaterialUiLight}>
<Button
variant="contained"
color="warning"
>
Please Change Color
</Button>
</MaterialThemeProvider>
</StyledEngineProvider>
}
Even though I have specified in the palette, warning to have green color I still see the default "orangish" color
So my question is: How can I change the color="warning" or "secondary" for the buttons or overall by using this createTheme function ? Seems like my colors are just ignored...
I want to disable the ripple effect since I don't want the effect when clicking on elements. Now this works but when doing this the :focus-visible state will also be disabled which is a bummer. Would be really nice to split this prop up into something like disableClickRipple, disableFocusRipple and so on...
Anyway, according to the docs I have to add focusVisibleClassName in order to style my own focus state but how would I do this to all elements that is affected by the disabled ripple effect? As I understand it I have to do this manually on each and every component? Can this be done globally? To me this would need to be a global setting?
I don't know if this is how MUI intended it to be, but this works:
import { createMuiTheme } from '#material-ui/core/styles';
const theme = createMuiTheme({
props: {
MuiButtonBase: {
// Disable ripple globally.
disableRipple: true,
// The class will be added (as is, ie `focus-visible`)
// To the ButtonBase root whenever the button gets focus via keyboard.
focusVisibleClassName: 'focus-visible',
},
},
overrides: {
MuiButtonBase: {
// And this is how we select it.
root: {
'&.focus-visible': {
backgroundColor: 'rgba(0, 0, 0, 0.12)', // theme.pallate.action.focus
},
},
},
},
});
export default theme;
PS. Spent an hour trying to solve this to no avail. Then I landed your question and "in order to style my own focus state" gave me the idea above.
In my themes/variables.scss I have two color themes (dark and light):
/* LIGHT COLOR THEMES
========================================= */
/*$colors: (
primary: #ffffff,
secondary: #fafafa,
danger: #f53d3d,
light: #1b1e28,
sliderColor: #fff,
colorIcon: #CCCBDA,
colorIconText: #7F7E96,
category: #fff,
listBackgroundColor: #ffffff,
backgroundColor: #fafafa,
toobarBackground: #ffffff,
toobarButton: #AAB2B7,
toobarText: #FFFFFF
);*/
/* DARK COLOR THEMES
========================================= */
$colors: (
primary: #282C39,
secondary: #1b1e28,
danger: #f53d3d,
sliderColor: #fff,
light: #fff,
colorIcon: #7F7E96,
colorIconText: #7F7E96,
category: #fff,
listBackgroundColor: #1B1E28,
backgroundColor: #282C39,
toobarBackground: #1B1E28,
toobarButton: #D8D8D8,
toobarText: #FFFFFF
);
Right now I can only put one theme in my app. If I want to change the theme, I have to comment the one variable out and the other I have to remove the comments.
How can I using these two themes, change the theme dynamically in the app in typescript?
In every tutorial I see these --ion-color-primary but I do not have these --ion-color prepending
You can do this in a couple of ways. The main idea is that define your colors class. you can have for example -
// light theme
:root {
// define your light colors here
}
// dark theme
:root body.dark {
// define you dark colors here
}
So by default, the light theme will be applied, as the <body> of you application does not hold any class. Now to apply dark theme you just simply add class dark to the <body> of you application. For example, you can have a service for that which simply selects the body and adds the class to it. And remove it to go back to light theme.
import { Injectable } from '#angular/core';
#Injectable({
providedIn: 'root'
})
export class ThemeService {
constructor() { }
applyDark() {
document.querySelector('body').classList.add('dark');
}
removeDark() {
document.querySelector('body').classList.remove('dark');
}
}
By the way, I see you are using you own color variable. I've just given the example using the default ionic variables (from src/theme/variables.scss)
Simply need to use withStyles some how to edit the default color from the primary/error color to simply just use black. But since the update from 0.19.0 to beta 1 this doesn't seem possible now.
The error message (the one under the text input) is using the object under theme.palette.error (see source) to choose which color to use.
That same palette color is used for the text field label too.
If you want to change both at the same time the right approach would be to use a custom theme that rewrites the theme.palette.error to something else.
import { createMuiTheme, createPalette } from 'material-ui/styles';
import grey from 'material-ui/colors/grey';
const theme = createMuiTheme({
palette: createPalette({
error: grey
})
});
If you want to change just the FormHelperText color then you could customize it in theme by using the overrides parameter.
const theme = createMuiTheme({
overrides: {
MuiFormHelperText: {
error: {
color: 'black'
}
}
}
});
To change the Label of the TextField in the current version (v1.2.1)
You have to set the the color like this:
const theme = createMuiTheme({
palette: {
text: {
secundary: 'black'
}
}
}
});
for error the path is palette.error.main
the easiest way to find the right variables is to look directly into the code
There was an issue requesting documentation for theming which the author subsequently closed. The author found their answer. A non-programmer will probably not. At least, the non-programmer designer I'm helping doesn't even know where to start (and I still don't have a working different colored slider). This kind of documentation would be great. Even if it's just a link to the code #jdelafon found with some explanation that would suffice to answer the following specific example.
Ultimately, we want a set of sliders with each one a different color. It seems like the appropriate way to do this is with per-element inline styles.
I made a simple example here. Can you change the color of the slider? (We started down the path of breaking out to CSS, but the widget is so dynamic that this approach ends up being quite ugly.)
Slider has two different slots for theming, neither of which seems to respond to an embedded object with a selectionColor key.
Should be simple. Probably it is, but it appears to be undocumented. Otherwise it's a rad UI toolkit, thanks devs!
Take a look at this line of getMuiTheme.js. You can find there that slider can have those styles overridden:
{
trackSize: 2,
trackColor: palette.primary3Color,
trackColorSelected: palette.accent3Color,
handleSize: 12,
handleSizeDisabled: 8,
handleSizeActive: 18,
handleColorZero: palette.primary3Color,
handleFillColor: palette.alternateTextColor,
selectionColor: palette.primary1Color,
rippleColor: palette.primary1Color,
}
In material-ui you need to use MuiThemeProvider in order to use your custom theme. Taking your example:
...
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import { Slider } from 'material-ui';
const theme1 = getMuiTheme({
slider: {
selectionColor: "red",
trackSize: 20
}
})
const theme2 = getMuiTheme({
slider: {
selectionColor: "green",
trackSize: 30
}
})
const HelloWorld = () => (
<div>
...
<MuiThemeProvider muiTheme={theme1}>
<Slider defaultValue={0.5}/>
</MuiThemeProvider>
<MuiThemeProvider muiTheme={theme2}>
<Slider defaultValue={0.5}/>
</MuiThemeProvider>
</div>
);
export default HelloWorld;
Your modified webpackbin: http://www.webpackbin.com/EyEPnZ_8M
The sliderStyle you tried to use is for different styles :-) Like marginTop / marginBottom, a full list can be found here.