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-raduis，在焦点上创建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 component- Material-UI

我希望这个答案能对您有所帮助。

如何在Material-UI中更改“文本字段”焦点样式？

1 个答案: