Блог

Главная - Вопросы по программированию - Кнопка в свойстве href группы кнопок изменяет правую границу

Кнопка в свойстве href группы кнопок изменяет правую границу

#material-ui

Вопрос:

В MUI 5.0.2 href свойство Button in a ButtonGroup изменяет Button правую границу.

Когда этого нет href , правильная граница не будет отображаться. Он появится при наведении курсора.

@Ryan Cogswell говорит, что стиль для границы используется :not(:last-of-type) в селекторе. Это означает , что MUI использует класс на и, что мне кажется очень сомнительным.

Это что, ошибка?

Я разместил минимальную среду со страницами GitHub. Этот вопрос показан в первой и последней главах.

(рисунки 2 и 4 одинаковые)

Кнопка с href

Кнопка с href

Кнопка без href

Кнопка без href

Кнопка без href при наведении

Кнопка без href при наведении

Элемент без href

Элемент <Button /> без href

Также я поднял соответствующий вопрос об официальном репо и в своей учебной записке

Комментарии:

1. В вашей проблеме отсутствует песочница кода (которая запрашивается шаблоном проблемы). Здесь также была бы полезна песочница кода.

2. Правая граница должна отсутствовать для кнопок в группе кнопок, отличной от последней кнопки, — в противном случае вы получите двойную границу между кнопками (я не думаю, что она предназначена для использования с кнопками со значками). Наличие/отсутствие опоры «href» влияет на поведение, потому что стиль границы используется :not(:last-of-type) в селекторе. Когда href он присутствует, он отобразит a тег, в противном button случае тег, поэтому, когда правая граница присутствует для кнопки посередине, это, вероятно, связано с использованием обоих типов элементов в группе.

3. На самом деле я только что перешел из песочницы кода из-за низкой скорости обновления. Это занимает в пять или десять раз больше времени, чем локальная работа. Я думал, что было бы проще протестировать локальную работу, чтобы вы тоже могли протестировать. Я last-of-type тоже об этом догадался, но создание <a/> <button/> одинаковых типов кажется мне очень странным, так что, может быть, это ошибка?

4. Нет, локальная работа не облегчает работу ни мне, ни команде MUI, рассматривающей проблему. Я не хочу ничего устанавливать локально — Я просто хочу нажать на ссылку «песочница кода». Что касается того, является ли это ошибкой-я так не думаю. Вы просто используете ButtonGroup таким образом, чтобы он не предназначался для поддержки. Ни в одном из примеров в документах не используются кнопки со значками. Один пример действительно заключает значок в обычный Button . В документах указано, что непосредственными потомками a ButtonGroup должны быть Button элементы.

5. В документах MUI v5 также есть демо-версии StackBliz, по моему ограниченному опыту, это быстрее, чем Codesandbox, поэтому вы можете попробовать.

Ответ №1:

Объясненный комментариями @Ryan Cogswell, я сопоставил этот ответ.

  • Используется стиль для границы :not(:last-of-type) (угадайте: вкл <button> .).
    • IconButton у корневого узла <button> .
    • В Button , если href определено, <a> элемент будет использоваться в качестве корневого узла (в противном случае a <button> ), говорится в официальном документе.
    • Это объясняет эти два вопроса:
      1. Свойство href изменяет правую границу элемента, поскольку оно изменяет <button> на <a>
      2. Когда все IconButton -s находятся на одной стороне, другие <Button> -s имеют href свойство, форма фона при наведении последнего IconButton изменится, потому что это изменит результат :not(:last-of-type) CSS-запроса на <button> -s.
Метки: