html - 如何更改 Material-UI 中的文本字段焦点样式？

Question

聚焦时我有一个像这样的搜索框:

如何改变它的背景、边框和图标的颜色？还有不对焦时的修改方式。

我的代码:

<TextField
    className={classes.searchBarStyle}
    placeholder="Search"
    type="search"
    margin="normal"
    variant="outlined"
    InputProps={{
        startAdornment: (
            <InputAdornment position="start">
                <Search />
            </InputAdornment>
        ),
        classes: {input: classes.input}
    }}
/>

CSS:

searchBarStyle: {
    height: "40px",
    width: "200px",
    margin: "0 0 0 0",
    float: "right",
},
input: {
    color: "white",
    textDecoration: "none",
    '&::placeholder': {
        color: 'white',
        fontWeight: "400"
    }
}

Answer 1

我也遇到了同样的问题，然后我发现了你的问题并尝试自己解决。 我认为现在回答还不算晚。

您可以使用 @material-ui/core/styles 中的 makeStyles 例如，我默认创建边框颜色和边框半径，焦点为边框颜色和边框宽度，并将图标更改为

import { makeStyles } from '@material-ui/core/styles';
import { TextField } from '@material-ui/core/TextField';
import PersonAddIcon from '@material-ui/icons/PersonAdd';

const useStyles = makeStyles(theme => ({
    searchBarStyle: {
        height: "40px",
        width: "200px",
        margin: "0 0 0 0",
        float: "right",
        "& .MuiOutlinedInput-root": {
            "& fieldset": { 
                borderRadius: "20px",
                borderColor: "#000fff"
            },
        "&.Mui-focused fieldset": {
            borderColor: "#C52328"
            borderWidth: "2px"
        }
    }
}
}))


const CustomTextField = () => {
const classes = useStyles()
return <TextField
    className={classes.searchBarStyle}
    placeholder="Search"
    type="search"
    margin="normal"
    variant="outlined"
    InputProps={{
        startAdornment: (
            <InputAdornment position="start">
                <PersonAddIcon />
            </InputAdornment>
        )
    }}
/>
}

export default CustomTextField;

我修改的所有className都可以在浏览器的检查模式下检查

如果您想了解更多信息，请查看此链接(查看自定义输入)

TextField React component- Material-UI

希望这个回答可以帮到你。