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
});
Related
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
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'm trying to use a custom color, but I got a problem when I change the color on the tailwind config, Twin.macro does not recompile the style,
p.s: it's worked fine when I use it with className
// tailwind.config.js
module.exports = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx}',
'./src/components/**/*.{js,ts,jsx,tsx}',
],
important: true,
theme: {
extend: {
colors: {
// primary: '#00bcd4',
primary: '#fde047',
},
},
}
}
// babel-plugin-macros.config.js
module.exports = {
twin: {
preset: 'styled-components',
autoCssProp: false,
},
}
// .babelrc.js
module.exports = {
presets: [['next/babel', { 'preset-react': { runtime: 'automatic' } }]],
plugins: ['babel-plugin-macros', 'babel-plugin-styled-components'],
}
Example of usage
<div className="text-primary">Hello </div> // Color change
<div tw="text-primary">#Dégage_Akhannouch</div> // Color does not change
I'm thinking to do it like the following, but I'm not sure if this is the recommended way to do it:
import * as React from "react"
import { withStyles, createStyles, Theme } from "#material-ui/core"
import CssBaseline from "#material-ui/core/CssBaseline"
// global styles for a Mapper app
class MyCssBaseline extends React.Component {
render() {
return <CssBaseline />
}
}
export default withStyles(styles)(MapperCssBaseline)
function styles(_theme: Theme) {
return createStyles({
"#global": {
fontSize: 12,
// ... custom styles here ...
}
})
}
Is this how? Or is there a more recommended way?
I managed to do it with overrides when creating theme
export const theme: Theme = createMuiTheme({
overrides: {
MuiCssBaseline: {
'#global': {
svg: {
maxWidth: '100%',
maxHeight: '100%',
},
},
},
},
})
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',
},
},
},
},
}