Question

I'm trying to change the text color of a tag link. But it does not work. I don't understand how the "a:link" and "a:visited" syntax should look in the component class in the "testBoXStyle " var.

The code of the component:

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>
        );
    }
}

Answer 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>
        );
    }
}

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

.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中的这种嵌套是可行的，因为样式组件支持scss。

更改<a> tag text color of React Component

1 个答案: