为 Link 组件内的 span 添加颜色不会改变 span 的颜色？答案

【问题标题】：Adding color for a span inside a Link component doesn't change the color of the span?为 Link 组件内的 span 添加颜色不会改变 span 的颜色？
【发布时间】：2018-10-02 07:02:42
【问题描述】：

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作为一个ui框架。由于 Link 组件隐藏了 span 元素中的文本，所以我想更改 span 元素的颜色，但添加 color prop 没有任何效果。

【问题讨论】：

请显示代码和您尝试执行的操作，并更详细地解释您的问题
您是否删除了分配给锚组件 ("a") 的基本 css，因为它可能会覆盖它。

标签： reactjs react-router antd

【解决方案1】：

我不完全理解你的问题，但是如果你想用红色写“标签”（也是一个链接），你可以尝试以下两种方式之一：

<Link to='/tags'><span style={{ color: 'red !important' }}>Tags</span></Link> 这样，您的意思是您的 CSS 规则应该覆盖已经存在的规则。不过，您应该尽量避免使用!important 关键字，除非是极端情况；
<Link to='/tags' class='myLink'><span>Tags</span></Link>这种方式，首先你给你想要的红色链接一个class，然后你需要写一些CSS规则：
```
a.myLink:link, a.myLink:visited, a.myLink:hover, a.myLink:active {
    color: red;
}
```
当然，使用这条规则，您将随时看到红色链接（如果您单击它，如果您将其悬停，...）您可以通过划分 CSS 规则来自定义它。

【讨论】：