Как я могу назначить два разных стиля одному компоненту на одной странице? - PullRequest
Новая
       27

Как я могу назначить два разных стиля одному компоненту на одной странице?

0 голосов
/ 27 февраля 2019

Я занимаюсь разработкой веб-приложения с Node JS, React и Bootstrap.У меня есть главное меню и дополнительное меню, оба сделаны с вкладками.Я определил стиль для главного меню.И я хотел бы придать второму стилю другой стиль, но у меня есть проблемы, потому что стиль, примененный к вторичному меню, наконец, применяется и к главному меню.

Я только получаю его, чтобы придать индивидуальный стиль размеру шрифта вкладки дополнительного меню, но я бы хотел настроить цвет фона для вкладок дополнительного меню.

Прямо сейчас у меня есть это:

enter image description here

Я хочу настроить дополнительное меню с другим размером шрифта и цветом фона.Чтобы сделать это, я переписал эти стили: 

.nav-pills .aux{
    font-size: 12pt !Important;
}

.nav-link.active .aux{    
    background-color: #1302ff !Important;
}

Это код дополнительного меню: 

<Tab.Container id = "submenu" defaultActiveKey = "home">
    <Row>
        <Col md = {12}>
            <Nav justify variant="pills">
                <Nav.Item>
                    <Nav.Link className = "aux" eventKey = "home">Home</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link className = "aux" eventKey = "teams">Equipos</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link className = "aux" eventKey = "results">Resultados</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link className = "aux" eventKey = "stats">Estadísticas</Nav.Link>
                </Nav.Item>
            </Nav>
        </Col>
    </Row>
</Tab.Container>

Первый из стилей был перезаписан, работает нормально, я получаюизменить размер шрифта вкладки, но второй стиль не работает.

Как установить цвет фона для дополнительного меню?

Редактировать I:

Я добавил идентификатор в nav.link идоступ к стилю с помощью этого идентификатора, но он не работает: (

Это мой код: 

<Nav.Item>
    <Nav.Link id = "home" className = "aux" eventKey = "home">Home</Nav.Link>
</Nav.Item>

И это мои стили: 

.nav-pills .aux{
    font-size: 12pt !Important;
}

#home .nav-link.active .aux{    
    background-color: #1302ff !Important;
}

Изменения не влияют на дизайн: (

РЕДАКТИРОВАТЬ II:

Если я добавлю класс в тег, он не будет работать для меня :( Вкл.наоборот, я потерял настроенный размер шрифта.

enter image description here

Код: 

                            <Nav justify variant="pills" className = "submenu">
                                <Nav.Item>
                                    <Nav.Link className = "aux" eventKey = "home">Home</Nav.Link>
                                </Nav.Item>
                                <Nav.Item>
                                    <Nav.Link className = "aux" eventKey = "teams">Equipos</Nav.Link>
                                </Nav.Item>
                                <Nav.Item>
                                    <Nav.Link className = "aux" eventKey = "results">Resultados</Nav.Link>
                                </Nav.Item>
                                <Nav.Item>
                                    <Nav.Link className = "aux" eventKey = "stats">Estadísticas</Nav.Link>
                                </Nav.Item>
                            </Nav>

CSS: 

.submenu > .nav-pills .aux{
    font-size: 12pt !Important;
}

.submenu > .nav-link.active .aux{    
    background-color: #1302ff !Important;
}

1 Ответ

0 голосов
/ 27 февраля 2019

Вы можете добавить новый класс в ваше второе меню.Если вы добавите .submenu к <Nav justify variant="pills">, вы можете настроить свой код, используя css.

Код: 

<Nav justify variant="pills" className="submenu">

CSS: 

.submenu > .nav-pills .aux {
    font-size: 12pt !important;
}

.submenu > .nav-link.active .aux {    
    background-color: #1302ff !important;
    /* Add new styles here */
}
...