I'd like to change the default white in the Material UI theme from #fff to #fdf6e3.
I'd expect instances of default white to change but I'm not sure if this is even the right way to do this.
export const newTheme = createTheme(baseTheme, {
palette: {
mode: "light",
common: { white: "#fdf6e3" },
background: { default: "#073642" },
primary: { main: "#002b36" },
secondary: { main: "#dc322f" },
},
})
I found the structure here: https://mui.com/material-ui/customization/default-theme
Related
Is there a good approach when I use MUI (Material UI) with Tailwind css to use the same color palette in my code?
(For example MUI theme should use the colors which I define in my tailwind.config)
Currently I have an extra file colors.js and define my hex-colors with const. And then use this variables in both. But I don't really like this solution :/
color.js
type module.exports = {
primaryLightColor: '#757ce8',
primaryMainColor: '#224AA6',
primaryDarkColor: '#042757',
secondaryLightColor: '#BDC1C9',
secondaryMainColor: '#8B969D',
secondaryDarkColor: '#4C5356',
errorColor: '#F44336',
warningColor: '#FF9800',
infoColor: '#A5C8FF',
successColor: '#82C64D',
backgroundColor: '#F7F8FA',
};
theme.tsx
import { createTheme } from '#mui/material';
import {
primaryLightColor,
primaryMainColor,
primaryDarkColor,
secondaryLightColor,
secondaryMainColor,
secondaryDarkColor,
} from './colors';
export const theme = createTheme({
palette: {
primary: {
light: primaryLightColor,
main: primaryMainColor,
dark: primaryDarkColor,
},
secondary: {
light: secondaryLightColor,
main: secondaryMainColor,
dark: secondaryDarkColor,
},
},
});
tailwind.config.js
/** #type {import('tailwindcss').Config} */
const {
primaryLightColor,
primaryMainColor,
primaryDarkColor,
secondaryLightColor,
secondaryMainColor,
secondaryDarkColor,
errorColor,
warningColor,
infoColor,
successColor,
backgroundColor,
} = require('./app/styles/colors.js');
module.exports = {
corePlugins: {
preflight: false,
},
content: ['./app/**/*.{js,ts,jsx,tsx}'],
important: '#root',
theme: {
colors: {
primary: {
light: primaryLightColor,
main: primaryMainColor,
dark: primaryDarkColor,
},
secondary: {
light: secondaryLightColor,
main: secondaryMainColor,
dark: secondaryDarkColor,
},
error: errorColor,
warning: warningColor,
info: infoColor,
success: successColor,
background: backgroundColor,
},
extend: {},
},
plugins: [],
};
I want to give my Outlined textField green color on focus and if error occurs durring typing, then color should be changes to red.
But in my case if I am giving
"& .MuiOutlinedInput-root": {
"&.Mui-focused fieldset": {
borderColor: 'green'
},
},
if shows green on error too during focus.
.Mui-focused is a separate class than .Mui-error, so you'll have to override each individually. See the docs for a full list of all CSS classes available on this component.
Here is an example of customizing multiple classes:
import { styled } from '#mui/material/styles'
const CssTextField = styled(TextField)({
'& label.Mui-focused': {
color: 'green',
},
'& .MuiInput-underline:after': {
borderBottomColor: 'green',
},
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: 'red',
},
'&:hover fieldset': {
borderColor: 'yellow',
},
'&.Mui-focused fieldset': {
borderColor: 'green',
},
},
})
Here is a live demo of customized OutlinedInputcomponents.
I need to use the select state in a Treemap to change the color of the selected area (it works well for other charts like pie charts, bubble charts...). But the state seems to not be taken into account.
The demo is here : https://jsfiddle.net/vegaelce/0xuqvrg3/
I tried to use the settings described in the documentation (I tried "color" and "marker/fillColor") :
plotOptions: {
series: {
allowPointSelect: true,
states: {
hover: {
color: "#ff0000",
marker: {
fillColor: "#ff0000"
}
},
select: {
color: "#0000ff",
marker: {
fillColor: "#0000ff"
}
}
},
But no success... Any idea to achieve that please ?
Thanks in advance
How can I refer the palette in a theme override?
e.g. I want to change the selected Tab to have the secondary color as background, instead of hardcoded blue
const theme = createMuiTheme({
overrides: {
MuiTab: {
root: {
"&$selected": { backgroundColor: "blue" }, // TODO palette.secondary.main instead of blue
}
}
},
palette: {
primary: { main: "black" },
secondary: { main: "blue" }
}
});
You can create palette object that you can refer to:
import { createMuiTheme } from '#material-ui/core';
import createPalette from '#material-ui/core/styles/createPalette';
const palette = createPalette({
primary: { main: "black" },
secondary: { main: "blue" }
});
const theme = createMuiTheme({
overrides: {
MuiTab: {
root: {
"&$selected": { backgroundColor: palette.secondary.main },
}
}
},
palette
});
Having trouble finding documentation on how to change the default border color of an outlined Textfield on hover using a custom theme on Material ui.
MuiOutlinedInput: {
root: {
"&:hover:not($disabled):not($focused):not($error) $notchedOutline": {
border: "2px solid",
borderColor: "yellow"
}
}
}
Reference
Example
MUI v5
MuiTextField: {
styleOverrides: {
root: {
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: 'black',
},
'&:hover fieldset': {
borderColor: 'red',
},
'&.Mui-focused fieldset': {
borderColor: 'yellow',
},
},
},
},
}