更改 React 组件的 <a> 标签文本颜色答案

【问题标题】：Change <a> tag text color of React Component更改 React 组件的 <a> 标签文本颜色
【发布时间】：2018-09-25 04:20:09
【问题描述】：

我正在尝试更改标记链接的文本颜色。但它不起作用。我不明白“a:link”和“a:visited”语法在“testBoXStyle”变量中的组件类中的外观。

组件代码：

class TestBox extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            opac: 0.0,
            wid: 5,
            hei: 5,
            topp: 200,
            leftt: 200
            };

        updateTestBoxState = updateTestBoxState.bind(this);
    }

    render(){
        var testBoXStyle = {
            transition: 'width 0.2s ease-out, height 0.2s ease-out, opacity 0.2s ease-out, transform 0.5s ease-out, left 0.5s ease-out, top 0.5s ease-out',
            width: this.state.wid,
            height: this.state.hei,
            backgroundColor: '#2222FF',
            opacity: this.state.opac,
            boxShadow: "3px 3px 20px #333333",
            borderRadius: 5,
            padding: 10,
            position: 'absolute',
            top: this.state.topp,
            left: this.state.leftt,
            a:'link {color: white)}',
            a:'visited {color: white)}'
        }

        return (
            <div style={testBoXStyle}>
                <h1>Contacts:</h1>
                Some info...
                <br/>Some info...
                <br/>Some info...   
                <br/>Some info...
                <br/>Some info...
                <br/><a target="_blank" href="https://www.youtube.com/">Youtube</a>
            </div>
        );
    }
}

【问题讨论】：

标签： reactjs colors hyperlink components

【解决方案1】：

内联 CSS does not support pseudo-classes or pseudo-elements（如 :visited）。要使用伪类或伪元素，您需要使用内联样式以外的其他东西。

有时只需导入一个 css 文件并使用相关类就足够了。

使用常规样式表

import React from 'react'
import './myStylesheet.css'

class TestBox extends React.Component {
    render(){
        return (
        <div class='myDivClass'>
            <a>Some info...</a>
        </div>
        );
    }
}

然后在myStylesheet.css 中定义myDivClass 样式。

.myDivClass a:visited {
    color: white;
}

使用 styled-components 你会这样做：

import React from 'react'
import styled from 'styled-components'

const StyledDiv = styled.div`
    a:visited {
        color: white;
    }
`

class TestBox extends React.Component {
    render(){
        return (
        <StyledDiv>
            <a>Some info...</a>
        </StyledDiv>
        );
    }
}

StyledDiv 中的这种嵌套有效，因为 styled-components 支持 scss。

【讨论】：