如何使用 CSS 隐藏我的 Material UI 按钮？答案

【问题标题】：How to hide my Material UI button using CSS?如何使用 CSS 隐藏我的 Material UI 按钮？
【发布时间】：2022-01-26 17:31:42
【问题描述】：

我正在为我的 TODO react 应用程序使用 Material UI 按钮。我只希望我的表单有一个带有提交按钮的输入字段，但我希望我的提交按钮不可见，以便用户感觉我的表单在单击“返回”键时提交。

   import { TextField, Button } from '@material-ui/core';

    <form>
      <TextField
        id="standard-basic"
        label="Write a Todo"
        variant="standard"
        className="textField"
        value={todoInput}
        onChange={(e) => {
          setTodoInput(e.target.value);
        }} />
      <Button 
        type="submit" 
        variant="contained" 
        onClick={addToDo} 
        className="buttonDisplay">
        Display
        </Button>
    </form>

我添加了 display: none;对我的 CSS 来说，它仍然没有消失。

.buttonDisplay{
   display: none;
 }

谁能告诉我这是什么问题。

【问题讨论】：

也许你应该在选择器上更简洁，或者添加!important来强制值。我怀疑 Material-ui css 被优先考虑。

标签： css reactjs forms button material-ui

【解决方案1】：

如果正在寻找一种无需按钮即可提交表单的方法，请查看此。

export default function App() {
  const [todoInput, setTodoInput] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(todoInput);
  };
  
  return (
    <form
      onSubmit={(e) => {
        handleSubmit(e);
      }}
    >
      <TextField
        id="standard-basic"
        label="Write a Todo"
        variant="standard"
        className="textField"
        value={todoInput}
        onChange={(e) => {setTodoInput(e.target.value)}}
      />
    </form>
  );
}

onSubmit 会在你按下'return'键时触发

沙盒：https://codesandbox.io/s/polished-bush-uzi6e?file=/src/App.js

【讨论】：

【解决方案2】：

您可以使用不同的方法使用 CSS 隐藏按钮：

修改opacity参数
调整alpha color参数
或者只是更改按钮的visibility 方面

这里有一个链接可以帮助您使用这些元素：

Ways to hide elements in CSS

【讨论】：