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

Question

这是我尝试使用 React 表单钩子和 material ui 制作的这种表单的 link to codesandbox。代码在 components\execute 文件夹下的 CreateEmployee.tsx 文件中。 UI截图如下。

我正在尝试：

但我的 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

React Form Hook: make selectors equal width again