I want to change all my Material UI Select component's dropdown menu style with createTheme, but it doesn't work.
Below is my code. Did I get something wrong?
import { createTheme } from '#mui/material/styles';
const theme = createTheme({
// palette, typography, etc.
components: {
MuiSelect: {
defaultProps: {
MenuProps: {
PaperProps: {
style: {
boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.2)',
},
},
},
},
styleOverrides: {
// do something
},
},
},
});
Related
I tried to change label's margin (see the attached image to the question) from px to em/rem, but i don't know where i should write styles to structure. I can't find in MUI documentation "adjacent sibling combinator".
createTheme({
MuiTextField: {
defaultProps: {
// props
},
styleOverrides: {
root: {
// styles
}
}
}
})
generated css style in inspector tab
If you are using material-ui 5:
import { createTheme } from '#mui/material';
const theme = createTheme({
components: {
MuiTextField: {
styleOverrides: {
root: {
'& label': {
margin: '2rem',
},
},
},
},
},
});
export default theme;
https://mui.com/pt/material-ui/customization/theme-components/
I finally resolve it ;) I added to InputLabel this line "& + .MuiInputBase-root" to change TextField's (and another inputs) label
MuiInputLabel: {
defaultProps: {
// props
},
styleOverrides: {
root: {
// styles
"& +.MuiInputBase-root": {
marginTop: '2em'
}
}
}
}
I use makeStyles to style a custom card but the MUI default styles are overriding them, when I use !important my styles are applying otherwise they are getting overridden.
const useStyles = makeStyles({
'dashboard-card': {
boxSizing: 'border-box',
borderRadius: '20px',
boxShadow:
'0px 4px 4px rgba(50, 50, 71, 0.08), 0px 4px 8px rgba(50, 50, 71, 0.06)',
},
});
type DashboardCardProps = {
children: JSX.Element | JSX.Element[];
className?: string;
};
const DashboardCard = ({ children, className }: DashboardCardProps) => {
const classes = useStyles();
return <Card className={`${className} ${classes['dashboard-card']}`}>{children}</Card>;
};
export default DashboardCard;
Is there any way how can I get around this, is it possible to remove the default stylings from the theme?
const theme = createTheme({
palette: {
primary: {
light: '#21B8F9',
main: '#103B66',
dark: '#000032',
},
},
components: {
MuiCard: {
styleOverrides : {
root: {}
}
},
MuiPaper: {
styleOverrides: {
root: {}
}
}
},
typography: {
fontFamily: ['Source Sans Pro', 'Noto Sans HK'].join(','),
},
});
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 am using a Material UI React component called TextareaAutosize:
<TextareaAutosize
minRows={2}
style={resize: 'none'}
defaultValue={<span style={{fontSize: "20px", color: "blue"}}>Content Body</span>}
/>
Instead of getting Content Body in the TextareaAutosize component, I'm getting this as the default value:
How do I add styling to the defaultValue?
Edit code on Stack Blitz: https://stackblitz.com/edit/react-fnx6we?file=demo.js
EDIT: For clarification, I want ONLY the defaultValue to have the styling I applied. When the user starts typing or removes the defaultValue and starts typing, the styling of the defaultValue should NOT be applied.
defaultValue parameter accepts String values only. Use parameter style to define additional styling. Or use jss like styling for components (check #mui/styles) EDIT: to change styling of the element "on the fly" you will need to use additional variables and functions. Check demo on code on Stack Blitz.
import React, { useState } from 'react';
import TextareaAutosize from '#mui/material/TextareaAutosize';
import { makeStyles } from '#mui/styles';
const useStyles = makeStyles({
textAreaWithStyle: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
border: 0,
borderRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
color: 'white',
height: 48,
padding: '0 30px',
fontSize: '20px',
color: 'blue',
resize: 'none',
},
textAreaWithoutStyle: {
resize: 'none',
},
});
export default function MaxHeightTextarea() {
const classes = useStyles();
const [valueOfInput, setValueOfInput] = useState('Default Text');
const returnStyleBasedOnInput = () => {
if (valueOfInput === 'Default Text') {
return classes.textAreaWithStyle;
} else {
return classes.textAreaWithoutStyle;
}
};
const checkIfDefaultValueInTextAreaAndRemooveIt = () => {
if (valueOfInput === 'Default Text') {
setValueOfInput('');
}
};
const onInputChange = (e) => {
setValueOfInput(e.target.value);
};
return (
<TextareaAutosize
maxRows={4}
className={returnStyleBasedOnInput()}
value={valueOfInput}
onChange={onInputChange}
onClick={checkIfDefaultValueInTextAreaAndRemooveIt}
/>
);
}
Edit code on Stack Blitz: https://stackblitz.com/edit/react-fnx6we-3vdn7i?file=demo.js
I'm styling my inputs inside Chakra UI's extendTheme function however I'm struggling to style an input that has been autocompleted. Using the :autofill pseudo selector doesn't seem to have any bearing because the browser (Chrome) has its own styles set with !important which forces the input's background colour to be white.
const theme = extendTheme({
components: {
Input: {
baseStyle: {
field: {
bg: "gray.700",
color: "gray.300",
_hover: {
bg: "gray.500",
},
_focus: {
bg: "gray.500",
},
// This does not work
_autofill: {
bg: "gray.500",
}
}
}
}
}
})
Just incase anyone has the same issue, I couldn't figure out how to override the default browser background-color, so instead I gave it a box-shadow value that creates a similar effect. Box-shadow is not set by the browser's autofill styles so this works well for my case.
const theme = extendTheme({
components: {
Input: {
baseStyle: {
field: {
bg: "gray.700",
color: "gray.300",
_hover: {
bg: "gray.500",
},
_focus: {
bg: "gray.500",
},
_autofill: {
border: "1px solid transparent",
textFillColor: "#c6c6c6",
boxShadow: "0 0 0px 1000px #232323 inset",
transition: "background-color 5000s ease-in-out 0s",
},
}
}
}
}
})
As TommyR's answer explains, this is currently broken in Chakra UI.
However, this does work in variants.
A somewhat clean fix would be to create a variant for this, and set it as a defaultProp:
Input: {
variants: {
backgroundFix: {
field: {
bg: "green.500",
},
},
},
defaultProps: {
variant: "backgroundFix",
},
},
If wanted, you could extend other existing variants, like so:
Input: {
variants: {
outlineBackgroundFix: (props) => ({
field: {
...defaultTheme.components.Input.variants.outline(props).field,
bg: props.colorMode === "light" ? "white" : "gray.800",
},
}),
},
defaultProps: {
variant: "outlineBackgroundFix",
},
},
If I understand correctly, the reason that Input background styles are not applied via baseStyles is that styles for variants override baseStyles, and each variant sets background (often to 'transparent'). As such, I don't think this is a bug, and is alluded to in a callout in the docs:
Pro tip 💡: If you're looking for a list of parts of a multipart component you can check it by clicking on the "View theme source" button at the top of the documentation page for that certain component.
https://chakra-ui.com/docs/styled-system/component-style#styling-multipart-components
To override the variant's default theme, you can define just the parts you want to change, which will be merged with the default styles for the variant.
Check the source for Input: https://github.com/chakra-ui/chakra-ui/blob/%40chakra-ui/react%402.4.2/packages/components/theme/src/components/input.ts#L115
HT to previous answers for pointing the way!
const variantFilled = {
field: {
bg: "red.500", // merged with the default styles for `filled`
/* // default styles:
border: "2px solid",
borderColor: "transparent",
bg: mode("gray.100", "whiteAlpha.50")(props),
_hover: {
bg: mode("gray.200", "whiteAlpha.100")(props),
},
_readOnly: {
boxShadow: "none !important",
userSelect: "all",
},
_invalid: {
borderColor: getColor(theme, ec),
},
_focusVisible: {
bg: "transparent",
borderColor: getColor(theme, fc),
},
*/
},
addon: {
/*
border: "2px solid",
borderColor: "transparent",
bg: mode("gray.100", "whiteAlpha.50")(props),
*/
},
};
export const theme = extendTheme({
components: {
Input: {
variants: { filled: variantFilled },
},
},
});
If you need access to props to toggle mode:
Docs: Component Style > Styling multipart components
import { inputAnatomy } from "#chakra-ui/anatomy";
import { createMultiStyleConfigHelpers, extendTheme } from "#chakra-ui/react";
import { mode } from "#chakra-ui/theme-tools"
const { definePartsStyle } = createMultiStyleConfigHelpers(inputAnatomy.keys);
const variantFilled = definePartsStyle((props) => ({
field: {
bg: mode("gray.100", "whiteAlpha.50")(props),
}
}))