I've moved to MUI 5.0 and I'm having some issues with the migration. One problem is that I can no longer change the TextField globally and locally, if it is focused (e.g borderColor: 'blue',). The Textfield component is a bit more complicated and consists of multiple input Components.
It would be nice if somebody could help me with both cases
p.s thats the documentation https://mui.com/api/outlined-input/
globally
export const TextField = {
MuiOutlinedInput: {
styleOverrides: {
root: {
borderRadius: '1.5rem',
},
notchedOutline: {
borderColor: 'transparent',
'&.Mui-focused > fieldset': {
borderColor: 'blue',
},
},
input: {
color: palette.text.primary,
},
},
},
}
local (in the component itself not globally)
const styles = {
MuiOutlinedInput: {
root: {
borderRadius: '1.5rem',
},
notchedOutline: {
borderColor: 'transparent',
'&.Mui-focused > fieldset': {
borderColor: 'blue',
},
},
input: {
color: palette.text.primary,
},
},
}
<TextField sx={styles} />
Related
I'm using MUI version 5 and in particular I would like to use, in createTheme, the muiCssBaseLine customization part
createTheme({
palette: {
...
},
...,
MuiCssBaseline: {
styleOverrides: {
... my code
}
},
});
and apply some style to a generic class that I can apply to any mui component.
Therefore I can't be specific and use it under (for example) MuiChip, but it must be generic for any component.
MuiChip: {
// too specific
styleOverrides: {
myClass: {
marginLeft: '1px solid black',
boxShadow: 'none'
}
}
}
I figured this might work, but it doesn't work:
MuiCssBaseline: {
styleOverrides: {
'&.myClass': {
marginLeft: '1px solid black',
boxShadow: 'none',
},
}
},
I also tried
MuiCssBaseline: {
styleOverrides: {
root: {
'&.myClass': {
marginLeft: '1px solid black',
boxShadow: 'none',
},
}
}
},
I also tried some variations:
'& .myClass': {
marginLeft: '1px solid black',
boxShadow: 'none',
},
'myClass': {
marginLeft: '1px solid black',
boxShadow: 'none',
},
myClass: {
marginLeft: '1px solid black',
boxShadow: 'none',
},
but nothing works
I'm trying to create my own theme with Material-Ui v.5.4.0. And I faced with problem. I can't change TextField focused border color and width. I spend hours for research and didn't find working solution. And I started to think is it even possible to do that in theme? But it's not logical.
My current theme code:
import { createTheme } from '#mui/material/styles'
// Colors
const blue = '#5A5BD4'
const blueDark = '#4f4fd8'
// Parameters
const buttonsBorderRadius = 20
const buttonPadding = '5px 15px'
const inputBorderRadius = 10
const theme = createTheme({
components: {
// Buttons
MuiButton: {
variants: [
// Blue button
{
props: { variant: 'blueButton' },
style: {
backgroundColor: blue,
color: '#ffffff',
borderRadius: buttonsBorderRadius,
textTransform: 'none',
padding: buttonPadding,
'&:hover': {
backgroundColor: blueDark
}
}
},
// Transparent button
{
props: { variant: 'transparentButton' },
style: {
color: blue,
borderRadius: buttonsBorderRadius,
textTransform: 'none',
padding: buttonPadding
}
}
]
},
// Inputs
MuiOutlinedInput: {
styleOverrides: {
root: {
borderRadius: inputBorderRadius,
'& fieldset': {
border: `1px solid ${blue}`
}
},
focus: {
border: `1px solid ${blueDark}`
}
}
}
}
})
export default theme
My input code:
<TextField
size='small'
variant='outlined'
label={t('paslelbimo_data_nuo')}
type='date'
InputLabelProps={{
shrink: true
}}
fullWidth
value={publicationDateFrom}
onChange={(e) => setPublicationDateFrom(e.target.value)}
/>
Since I wasn't able to tell exactly what your desired effect was on focus vs not focused, I decided to just create a generic example, with overly dramatic styling, that may be useful to modify for your needs:
Essentially, I'm just overriding .MuiOutlinedInput-notchedOutline for both the focused an unfocused states:
const theme = createTheme({
components: {
// Inputs
MuiOutlinedInput: {
styleOverrides: {
root: {
...
"& .MuiOutlinedInput-notchedOutline": {
border: `5px solid green`,
},
"&.Mui-focused": {
"& .MuiOutlinedInput-notchedOutline": {
border: `5px dotted red`,
},
}
},
}
}
}
});
Working example CodeSandbox: https://codesandbox.io/s/customstyles-material-demo-forked-uri26?file=/theme.js:84-531
I'm using Material UI with React for the first time. I want to change my global theme, but what I want to change has two classes:
.MuiListItem-root.Mui-selected, .MuiListItem-root.Mui-selected:hover {
background-color: rgba(0, 0, 0, 0.08);
}
How can I select them with createMuiTheme? I've tried this:
createMuiTheme({
overrides: {
MuiListItem: {
root: {
Mui: {
selected: {
backgroundColor: "black",
"&:hover": {
backgroundColor: "blue",
},
},
},
},
},
}
})
Thank you in advance
Here's the correct syntax:
const theme = createMuiTheme({
overrides: {
MuiListItem: {
root: {
"&.Mui-selected": {
backgroundColor: "black",
"&:hover": {
backgroundColor: "blue"
}
}
}
}
}
});
It is also equivalent to do:
const theme = createMuiTheme({
overrides: {
MuiListItem: {
root: {
"&$selected": {
backgroundColor: "black",
"&:hover": {
backgroundColor: "blue"
}
}
}
}
}
});
Just try this code
createMuiTheme({
overrides: {
MuiListItem: {
root: {
'&$selected': {
backgroundColor: "black"
},
'&$selected:hover'{
backgroundColor: "blue"
}
},
},
},
})
and look to this response
Material UI adds the global Mui-selected classes to make it easier to change specific elements globally.
However, you should just be targeting the MuiListItem classes according to the docs like so:
createMuiTheme({
overrides: {
MuiListItem: {
selected: {
backgroundColor: "black",
"&:hover": {
backgroundColor: "blue",
},
},
},
}
})
I see that this doesn't work anymore in the current version of Material UI. In the source code of the ListItem component, it is now defined like so:
root: {
'&$selected, &$selected:hover': {
backgroundColor: theme.palette.action.selected,
},
...
}
I currently need to add marginLeft of 8px to FormHelperText. But havent been able to do it on the MuiInput formControl rule or in MuiSelect.
This is the React code:
<FormControl error className={classes.margin} fullWidth>
<InputLabel className={classes.label} id="demo-error-select-label">
Error select
</InputLabel>
<Select
labelId="demo-error-select-label"
id="demo-error-select"
value={option}
onChange={handleChange}
IconComponent={() => <Icon24UtilityChevron component="select" height="20px" />}>
<MenuItem value="">Select</MenuItem>
<MenuItem value={1}>Option1</MenuItem>
<MenuItem value={2}>Option2</MenuItem>
<MenuItem value={3}>Option3</MenuItem>
</Select>
<FormHelperText>Error</FormHelperText>
</FormControl>
This is the MuiSelect object that override default styles with createMuiTheme (ommited for briefly explanation):
const MuiSelect = {
select: {
backgroundColor: selectColors.background,
padding: '12px 16px 12px 16px !important',
fontSize: '18px',
borderRadius: 12,
borderWidth: '1px',
borderStyle: 'solid',
borderColor: selectColors.border,
'&:focus': {
borderRadius: 12,
borderWidth: '2px',
borderStyle: 'solid',
borderColor: selectColors.borderFocus,
},
},
selectMenu: {
'&:hover:not(.Mui-disabled):not(.Mui-error)': {
backgroundColor: selectColors.hoverBackground,
},
},
};
This is the MuiInput object that override default styles with createMuiTheme (ommited for briefly explanation):
This is an example of the FormControl being created (need to move the Error label 8px to the left):
[![enter image description here][1]][1]
const MuiInput = {
formControl: {
'label + &': {
marginTop: '2px',
},
},
root: {
borderRadius: '12px',
borderColor: inputColors.inputBorder,
borderWidth: '1px',
borderStyle: 'solid',
'&$error': {
borderColor: inputColors.inputError,
},
'&:focus-within': {
borderColor: inputColors.inputBorderFocus,
},
'& svg': {
marginRight: '16px',
},
},
input: {
backgroundColor: inputColors.inputBackground,
caretColor: inputColors.inputCaret,
paddingLeft: '8px',
paddingRight: '8px',
color: inputColors.inputText,
borderRadius: '12px',
},
multiline: {
paddingTop: '0px',
paddingBottom: '0px',
},
underline: {
'&:hover:not(.Mui-disabled):before': { borderBottomWidth: '0px' },
'&:before': { borderBottomWidth: '0px' },
'&:after': { borderBottomWidth: '0px' },
},
};
Take a look at the visual example of the code (the lower error text is the one that needs to be moved):
I could solve it by using ~ selector. Code:
const MuiInput = {
formControl: {
'label + &': {
marginTop: '2px',
},
'& ~ p': {
marginTop: '4px',
marginLeft: '8px',
},
},
...
I am trying to change the color of the all the Button's in the project by overriding the theme css. The color of the button has changed but hover color is still transparent, how can I override it ?
Is there any other way to this apart from adding a class to each of my buttons.
Also shouldn't all the variants of a button follow the css of the root?
const theme = createMuiTheme({
palette: {
primary: {
light: '#35C37D',
main: '#35C37D',
dark: '#35C37D',
// contrastText: will be calculated to contrast with palette.primary.main
},
secondary: {
light: '#35C37D',
main: '#35C37D',
// dark: will be calculated from palette.secondary.main,
contrastText: '#35C37D',
},
// error: will use the default color
},
overrides: {
MuiButton: {
// Name of the rule
root: {
// Some CSS
background: 'rgba(53, 195, 125, 100)',
borderRadius: 0,
border: 0,
colorInherit: '#fff',
color: 'white',
height: 40,
padding: '0 30px',
boxShadow: '4px 9px 26px 0 rgba(16,124,71,0.10)',
'&:hover': {
textDecoration: 'none',
backgroundColor: '#35C37D',
// Reset on touch devices, it doesn't add specificity
'#media (hover: none)': {
backgroundColor: '#35C37D',
},
},
},
textPrimary: {
color: '#fff',
},
textSecondary: {
color: '#fff',
},
contained: {
color: '#fff',
},
containedPrimary: {
color: '#fff',
},
containedSecondary: {
color: '#fff',
},
raised: {
color: '#fff',
},
colorInherit: {
color: '#fff',
},
},
},
typography: {
fontFamily: 'azo-sans-web',
// The default font size of the Material Specification.
fontSize: 14, // px
fontWeightLight: 300,
fontWeightRegular: 400,
fontWeightMedium: 500,
// Tell Material-UI what's the font-size on the html element.
// 16px is the default font-size used by browsers.
htmlFontSize: 16,
},
});
I figured it out.
Here is the code sandbox if anyone cares https://codesandbox.io/s/y2qyk9rn4x
Just need to add this for each variant:
outlined: {
"&:hover": {
backgroundColor: "#35C37D"
}
},