Question

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框架。由于“链接”组件将文本隐藏在span元素中，因此我想更改span元素的颜色，但是添加color prop没有任何作用。

Answer 1

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

<Link to='/tags'><span style={{ color: 'red !important' }}>Tags</span></Link> 这样，您说的是CSS规则应覆盖已经存在的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规则来自定义该链接。

在Link组件内为范围添加颜色不会改变范围的颜色吗？

1 个答案: