Добавление цвета для диапазона внутри компонента Link не меняет цвет диапазона? - PullRequest
Новая
       15

Добавление цвета для диапазона внутри компонента Link не меняет цвет диапазона?

0 голосов
/ 02 октября 2018 
import React, { Component } from 'react';
import { Menu, Icon } from 'antd';
import { Link } from 'react-router-dom';


const Sidebar = () => (
  <div style={{ width: '164px', padding: '20px 0px' }}>
    <Menu
      style={{ width: '164px' }}
      defaultSelectedKeys={['1']}
      defaultOpenKeys={['sub1']}
      mode="inline"
    >
      <Menu.Item key="1">
        <Icon type="home" />
        <Link to='/'><span style={{ color: 'rgb(199, 143, 95)' }}>Home</span></Link>
      </Menu.Item>
      <Menu.Item key="2">
        <Icon type="tags" />
        <Link to='/tags'><span style={{ color: 'rgb(199, 143, 95)' }}>Tags</span></Link>
      </Menu.Item>
      <Menu.Item key="3">
        <Icon type="team" />
        <Link to='/users'><span style={{ color: 'rgb(199, 143, 95)', backgroundColor: 'yellow' }}>Users</span></Link>
      </Menu.Item>
    </Menu>
  </div>
);

export default Sidebar;

Я использовал antd в качестве пользовательского интерфейса.Поскольку компонент Link скрывает тексты в элементах span, я хочу изменить цвет элементов span, но добавление цветового пропуска не имеет никакого эффекта.

1 Ответ

0 голосов
/ 02 октября 2018

Я не до конца понимаю ваш вопрос, но если вы хотите, чтобы надпись "Теги" (которая также является ссылкой) была написана красным, вы можете попробовать один из этих двух способов:

  • <Link to='/tags'><span style={{ color: 'red !important' }}>Tags</span></Link> Таким образом, вы говорите, что ваши CSS-правила должны переопределять уже существующие.Однако вам следует избегать использования ключевого слова !important, за исключением крайних случаев;

  • <Link to='/tags' class='myLink'><span>Tags</span></Link> Таким образом, сначала вы задаете класс для ссылки, которую вы хотите, красным, а затемвам нужно написать какое-то правило CSS: 

    a.myLink:link, a.myLink:visited, a.myLink:hover, a.myLink:active {
    color: red;
}

    Конечно, с этим правилом у вас будет красная ссылка в любое время (если вы нажмете на нее, если наведите на нее курсор,…), вы можете настроить ее, выполнивразделение правил CSS.

...