Ссылка на пункт меню Material-UI имеет синюю метку

Question

При использовании простого меню из компонентов пользовательского интерфейса реагирующего материала со ссылкой из реактивного маршрутизатора dom эти две синие линии остаются на первой ссылке, даже если все ссылки одинаковы. .

Странная вещь в том, что как только вы щелкнете по ней, синие линии исчезнут. Это происходит только по первой ссылке.

Я уже пытался изменить ссылку на простой тег привязки вместо ссылки реагирования. Это не сработало. Я также пытался стилизовать ссылку с помощью CSS и встроенных стилей, но это не сработало

Это все внутри возврата в меню

<div>
        <Button
          aria-owns={anchorEl ? 'simple-menu' : undefined}
          aria-haspopup="true"
          onClick={this.handleClick}
        >
          Open Menu
        </Button>
        <Menu
          id="simple-menu"
          anchorEl={anchorEl}
          open={Boolean(anchorEl)}
          onClose={this.handleClose}
        >

          <Link to="/"><MenuItem onClick={this.handleClose}>Home</MenuItem></Link>
          <Link to="/profile"><MenuItem onClick={this.handleClose}>Profile</MenuItem></Link>
          <Link to="/customize"><MenuItem onClick={this.handleClose}>Customize</MenuItem></Link>
          <Link to="/logout"><MenuItem onClick={this.handleClose}>Logout</MenuItem></Link>
        </Menu>
      </div>

Мне просто интересно, есть ли способ убрать две синие линии.

Answer 1

Тогда. Я напишу в ответах попробуйте это:

a, a:hover, a:focus { outline: none; }

Answer 2

Ответ Гакеко Бетси является правильным, однако стоит отметить, что схема имеет значение, особенно в случае доступности. Если вы удалите его с помощью CSS, убедитесь, что вы предоставили некоторые стили, которые очевидны.

Еще одна вещь, которую следует помнить, это то, что доступность предназначена не только для тех, у кого есть ограничения, но и для пользователей power ваших сайтов или людей, которые не используют мышь в качестве основного режима навигации.

Ссылка ниже углубляется и очень полезна для чтения - https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/

Answer 3

Для решения этой проблемы Gakeko Betsi предложила отредактировать css для элемента a с этой строкой a, a:hover, a:focus { outline: none; }