如何在 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，我在默认情况下创建了 border-color 和 border-radis，在焦点中创建了 border-color 和 border-width，并将图标更改为

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 组件- Material-UI

我希望这个答案可以帮助你。