Study/React
[React] MUI Autocomplete 스타일 적용
성으니:)
2023. 6. 7. 15:31
import Autocomplete from "@mui/material/Autocomplete";
import { styled } from "@mui/material/styles";
const StyledAutocomplete = styled(Autocomplete)({
"& .MuiInputLabel-outlined:not(.MuiInputLabel-shrink)": {
// Default transform is "translate(14px, 20px) scale(1)""
// This lines up the label with the initial cursor position in the input
// after changing its padding-left.
transform: "translate(34px, 20px) scale(1);"
},
"&.Mui-focused .MuiInputLabel-outlined": {
color: "purple"
},
"& .MuiAutocomplete-inputRoot": {
color: "purple",
// This matches the specificity of the default styles at https://github.com/mui-org/material-ui/blob/v4.11.3/packages/material-ui-lab/src/Autocomplete/Autocomplete.js#L90
'&[class*="MuiOutlinedInput-root"] .MuiAutocomplete-input:first-of-type': {
// Default left padding is 6px
paddingLeft: 26
},
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "green"
},
"&:hover .MuiOutlinedInput-notchedOutline": {
borderColor: "red"
},
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderColor: "purple"
}
}
});
export default function ComboBox() {
return (
<StyledAutocomplete />
);
}
참고 사이트