Псевдоклассы не работают в реакции-начальной загрузке при использовании Radium - PullRequest
Новая
       23

Псевдоклассы не работают в реакции-начальной загрузке при использовании Radium

0 голосов
/ 27 сентября 2019

Итак, я пытался добавить псевдокласс к начальной загрузке Nav Link, используя Radium, который зависает, но не работает.Я попытался создать HTML-тег и добавить псевдокласс к нему, и он работает.Вот мой код: 

import React, { Component } from 'react';
import { Navbar, Nav, Form, Button } from 'react-bootstrap';
import Radium from 'radium'

class Header extends Component {     
    render() {

        var HeaderStyles = {
            BtnLogin:{
                backgroundColor: "#D71149",
                borderColor: "white",
                fontWeight: "bold",
                ":hover": {
                    fontWeight: "italic"
                } 
            },
            BtnDaftar:{
                backgroundColor: "#FAFAFA",
                color: "black",
                borderColor: "white",
                fontWeight: "bold" 
            },           
            NavLink: {
                color: "white",
                ":hover": {
                    textDecoration: "underline"
                },
                fontSize: "12px"
            },    
            Header:{
                backgroundColor: "#C30F42"
            }    
        } 

        return (
            <div className="App" >    
                <Nav className="nav" style={HeaderStyles.Header}
                activeKey="/home"
                onSelect={selectedKey => alert(`selected ${selectedKey}`)}
                >
                    <Nav.Item>
                        <Nav.Link className="nav-link" style={HeaderStyles.NavLink}
                        href="/home">E-Voucher & Tiket</Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                        <Nav.Link className="nav-link" style={HeaderStyles.NavLink}  
                         eventKey="link-1">BukaReksa</Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                        <Nav.Link className="nav-link" style={HeaderStyles.NavLink}  
                        eventKey="link-2">Mobil & Motor</Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                        <Nav.Link className="nav-link" style={HeaderStyles.NavLink} 
                        eventKey="link-3" >BukaIklan</Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                        <Nav.Link className="nav-link" style={HeaderStyles.NavLink}   
                        eventKey="link-4" >BukaPengadaan</Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                        <Nav.Link className="nav-link" style={HeaderStyles.NavLink}  
                        eventKey="link-5" >Mitra Bukalapak</Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                        <Nav.Link className="nav-link" style={HeaderStyles.NavLink} 
                        eventKey="link-6" >BukaEmas</Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                        <Nav.Link className="nav-link" style={HeaderStyles.NavLink}  
                        eventKey="link-7" >Mulai Jualan</Nav.Link>
                    </Nav.Item>
                </Nav>

            </div>
        );
    }
}

export default Radium(Header);

Хотя сообщения об ошибках не отображаются.Я понятия не имею, что не так в моем коде.Любая помощь будет оценена.Спасибо!

...