任務是使用 Material UI 概述的輸入欄位（TextField來自 的組件"@material-ui/core": "^4.12.2",）并使用自定義藍色設定樣式。
這是我設法實作的目標：
InputLabel 的當前主題覆寫：
import { createTheme } from "@material-ui/core/styles";
export const muiTheme = createTheme({
overrides: {
MuiInputLabel: {
outlined: {
"&$focused": {
color: "#3f3fa0",
},
},
},
},
},
上述通用主題覆寫有助于將標簽（“電子郵件地址”）顏色更改為藍色。藍色border-color是通過TextField使用以下 CSS包裝在樣式組件中來實作的：
import styled from "styled-components";
import { TextField } from "@material-ui/core";
export const CustomTextField = styled(TextField)`
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
border-color: #3f3fa0;
}
`;
我像這樣渲染上面的組件（在 內部ThemeProvider）：
<CustomTextField
variant="outlined"
label={label}
/>
這個 hacky 解決方案有效，如我上面提供的影像所示，但是，有時 Mui 代碼決定將
我試圖將我能想到的幾乎任何組合添加到 Mui 覆寫物件以覆寫該border-color屬性，但無法弄清楚。你能幫我嗎？
uj5u.com熱心網友回復：
這是在 OutlinedInput (material-ui v4) 上覆寫邊框顏色的方法。
我在這里做了一個代碼沙盒
const defaultColor = "#ff0000";
const hoverColor = "#0000ff";
const focusColor = "#00ff00";
const theme = createTheme({
overrides: {
MuiOutlinedInput: {
root: {
// Hover state
"&:hover $notchedOutline": {
borderColor: hoverColor
},
// Focused state
"&$focused $notchedOutline": {
borderColor: focusColor
}
},
// Default State
notchedOutline: {
borderColor: defaultColor
}
}
}
});
uj5u.com熱心網友回復：
好吧，我沒有那么有經驗，material-ui但這似乎是您正在尋找的東西。
https://mui.com/styles/api/#examples
使用它，我認為可以自定義classname.
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/398147.html
標籤：javascript css 反应 材质-ui