时间戳

首页 > 解决方案 > 在 Link 组件中为 span 添加颜色不会改变 span 的颜色？

reactjs - 在 Link 组件中为 span 添加颜色不会改变 span 的颜色？

问题描述

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 没有任何效果。

标签： reactjsreact-routerantd

解决方案

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

  • <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 规则来自定义它。

推荐阅读