React Form Hook：使选择器再次等宽

Question

这是我正在尝试使用 React 表单钩子和材质 ui 制作的此表单的 link to codesandbox。代码位于components\execute 文件夹下的CreateEmployee.tsx 文件中。用户界面截图如下。

我正在努力：

1. 性别和名称的选择器（背景颜色：aqua） 等宽。
2. 提交按钮稍大，更显眼 字体。

但由于我有限的 css 知识，我无法做到这一点。有人可以帮忙吗？

Answer 1

以下是使select 元素具有相同宽度的方法：

select[name="Gender"],
select[name="Designation"] {
  min-width: 150px;
}

以下是如何使用 select 元素将 50% 分成几行：

.form-label-group label {
  background-color: yellow;
  width: 50%;
}

提交按钮：

input[type=submit] {
  width: 100px;
  font-size: 1.25em;
}

关于提交按钮，最好将className="anythingyouwant"添加到按钮元素并更改（在css中）input[type=submit]为.anythingyouwant