Reactjs 以编程方式编辑材质UI样式

当我按下搜索按钮时，我试图使输入展开，但在使用

makeStyles

后，我无法更改

material ui

样式

有什么办法我能做到吗

谢谢

示例代码：

const useStyles=makeStyles（（主题）=>({
搜索输入：{
宽度：0，
填充：0，
边界：“无”，
},
}));
函数ExpandableSearchBar（）{
const classes=useStyles（）；
函数onClick（）{
//更改输入类的样式
//类。搜索输入
}
返回(
);
}

您可以设置一个状态来切换输入的

类名。您的代码应该如下所示-

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>
  );
}


const useStyles=makeStyles（（主题）=>({
搜索输入：{
宽度：0，
填充：0，
边界：“无”，
},
expandedSearchInput：{
宽度：“5rem”//或者，您可以根据需要进行设置
//添加其他样式的扩展输入
}
}));
函数ExpandableSearchBar（）{
常量[isExpanded，setExpand]=useState（false）；
const classes=useStyles（）；
函数toggleSearchInput（）{
setExpand（val=>！val）；
}
返回(
);
}

注意-查看
的
类名。当
isExpanded
设置为
true
时，它将更改为
classes.expandedSearchInput
，谢谢。我认为这是一种比更改css属性更好的方法。