用程序编辑材质UI样式

Question

当我按下搜索按钮时，我试图使输入展开，但在使用makeStyles后无法更改material-ui样式。

有什么办法我能做到吗？

感谢

样本代码：

const useStyles = makeStyles((theme) => ({
searchInput: {
width: 0,
padding: 0,
border: "none",
},
}));
function ExpandableSearchBar() {
const classes = useStyles();
function onClick() {
// change style of the input class
// classes.searchInput
}
return (
<div className="component-wrapper">
<IconButton onClick={onClick} aria-label="Search">
<SearchIcon />
</IconButton>
<input className={classes.searchInput} type="text" />
</div>
);
}

Answer 1

您可以设置一个状态来切换输入的className。你的代码应该看起来像-

const useStyles = makeStyles((theme) => ({
searchInput: {
width: 0,
padding: 0,
border: "none",
},
expandedSearchInput: {
width: "5rem" // or, you can set it as per your need
// add other styles of expanded input
}
}));
function ExpandableSearchBar() {
const [isExpanded,setExpand] = useState(false);
const classes = useStyles();
function toggleSearchInput(){
setExpand(val => !val);
}
return (
<div className="component-wrapper">
<IconButton onClick={toggleSearchInput} aria-label="Search">
<SearchIcon />
</IconButton>
<input 
className={isExpanded ? classes.expandedSearchInput : classes.searchInput} 
type="text" /> 
</div>
);
}

注意-查看<input/>的className。当isExpanded设置为true时，它将变为classes.expandedSearchInput。