React Form Hook: снова сделать селекторы равными по ширине

Question

Вот ссылка на codesandbox этой формы, которую я пытаюсь сделать с помощью перехватчиков формы React и пользовательского интерфейса материала. Код находится внутри CreateEmployee.tsx файла в папке components\execute. Скриншот пользовательского интерфейса ниже.

Я пытаюсь сделать:

1. Селектор (цвет фона: аква) для пола и Обозначения должен быть равной ширины.
2. Кнопка «Отправить» немного больше, с более заметным шрифтом.

Но я не могу сделать это из-за моих ограниченных знаний css. Может кто-нибудь помочь, пожалуйста?

Answer 1

Вот как вы можете сделать select элементов одинаковой ширины:

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

Вот как разделить строки на 50% с select элементами:

.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