Как выбрать компонент ReactJS в CSS

Question

Я пытаюсь установить некоторые CSS значения для некоторых ReactJS компонентов.

Есть ли способ получить доступ к компонентам по их компоненту?

Представьте себе этот ReactJS компонент :

import './assets/css/custom.css'

<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark" sticky="top" className="navbar-custom-main">
      <Navbar.Toggle aria-controls="responsive-navbar-nav" />
      <Navbar.Collapse id="responsive-navbar-nav">
        <Nav className="mx-auto justify-content-center ">
          <Nav.Link href="#features" clas>Home</Nav.Link>
          <Nav.Link href="#pricing">Little Do you Know</Nav.Link>
          <Nav.Link href="#pricing">My Work</Nav.Link>
          <Nav.Link href="#pricing">Resume</Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Navbar>

Как я могу установить цвет шрифта для Nav.Link части, используя CSS?

Я пробовал это в моем custom.css:

Nav Nav.Link {
color: "red"  !important;
}

И это не работает. Есть ли способ сделать это?

Answer 1

Вы также можете использовать Ctrl F ... Найти Nav.Link ... Заменить Nav.Link className = "orange" ...

Вы можете найти все экземпляры и легко их заменить. Надеюсь, это поможет :)

Answer 2

Является ли Nav.Link компонентом, который вы написали?

Если вы написали компонент, отредактируйте код компонента, а не стилизуйте его извне с помощью класса и вложенных CSS селекторов.

Если компонент импортируется из библиотеки и вы хотите его отредактировать (без редактирования файлов node_modules), вы можете проверить элементы HTML, которые визуализирует компонент Nav.Link. Он может иметь CSS классов, которые вы можете изменить с помощью своих CSS.

Другой вариант, который я использую с библиотекой Ant Design, который может быть немного сложнее стилизовать, - это стилизованные компоненты, создание пользовательского компонента который обертывает библиотечный компонент в div styled-components, настраивает его по мере необходимости и импортирует мой собственный компонент вместо библиотечного.

Answer 3

Компоненты

<Nav.Link> на самом деле отображаются как комбинация элементов <div/> и <a class="nav-link"/>, вы можете определить, проверяете ли вы свой элемент. Таким образом, селекторы Nav и Nav.Link CSS определенно не затронут эти компоненты.

В идеале, дайте вашему компоненту идентификатор или класс и установите CSS ...

<Nav.Link href="#pricing" id="orange">Resume</Nav.Link>
#orange { color: "orange" };

Или:

<Nav.Link href="#pricing" className="orange">Resume</Nav.Link>
.orange { color: "orange" };

Или, если это не сработает, вы можете сделать это методом грубой силы ...

style = { color: "orange" };
<Nav.Link href="#pricing" style="{style}">Resume</Nav.Link>

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

Answer 4

Вам нужно проверить элемент, чтобы найти имя класса, к которому вы хотите применить css.

В вашем случае React-bootstrap компонент имеет nav-link класс:

.navbar-custom-main .nav-link {
 ...
} 

Answer 5

Дайте компоненту id или class и просто добавьте css к этому id/class

Пример:

<Nav.Link className={'active'} href="#features" clas>Home</Nav.Link>

.active: {color: red;}