Пользовательский CSS не переопределяет NavLink в React Bootstrap - PullRequest
Новая
       22

Пользовательский CSS не переопределяет NavLink в React Bootstrap

0 голосов
/ 26 апреля 2020

Я новичок в React и Boostrap, поэтому я начал играть с ними, используя react-bootstrap. Я слышал, что одним из самых простых способов переопределить бустрап CSS было применить свой собственный CSS поверх bootstrap CSS. Итак, у меня есть следующая страница

enter image description here

У меня есть следующее Приложение. js

import React from 'react';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import "bootstrap/dist/css/bootstrap.css";
import './App.css';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';


function App() {
  return (
    <Router>
      <Container fluid>
      <Navbar bg="dark" expand="lg" id="navbar-parent">
        <Navbar.Brand href="#home" id="navigation-bar">TURLS</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav"/>
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto" variant="pills">
            <Nav.Link href="#home" className="whte">Home</Nav.Link>
            <Nav.Link href="#api" className="whte">API</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>

      </Container>
    </Router>
    );
}

export default App;

Ниже приведено приложение . css

#navigation-bar {
  border-style: solid;
  padding: 15px;
  border-radius: 50px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-weight: 900;
  color: white;
  border-width: 5px;
  font-size: 1.5em;
}

#navigation-bar:hover {
  color: #3399ff;
}

.whte {
  color: white; 
}

Я смог переопределить шрифт и цвет Nav.Brand, используя свой собственный CSS, и сослаться на него, используя CSS #id селектор. Но я не смог переопределить Nav.Link, используя пользовательский CSS класс .whte. Я пытался изменить цвет Home и API , хотел изменить шрифт, размер pills и цвет фона, но я не знаю как.

Я могу изменить цвет текста, используя !important, но я где-то читал, что использование этого не было хорошим способом настройки вещей. После проверки элементов я обнаружил, что Nav.Links получали свой цвет от следующих CSS классов, несмотря на мой пользовательский класс .whte

.navbar-light .navbar-nav .nav-link {
    color: rgba(0,0,0,.5);
}

Аналогичным образом я обнаружил, что синий цвет nav-pills на самом деле были частью следующих классов 

.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
    color: rgba(0,0,0,.9);
}

и 

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: #007bff;
}

Я не уверен, какие классы настроить для желаемых эффектов. Я попытался добавить свою собственную реализацию CSS, но это не работает.

Так как же обычно go о настройке bootstrap css? Должен ли я переопределить все CSS классы, с которыми связан элемент boostrap? Или я должен поставить идентификатор для каждого элемента и настроить каждый из них отдельно с тем же кодом.

Мои извинения, если вопрос слишком наивный или неоднозначный, я просто пытаюсь понять рекомендуемый способ изменить или настроить bootstrap CSS в Реагирует Bootstrap

Спасибо за вашу помощь

Ответы [ 2 ]

0 голосов
/ 27 апреля 2020

У вас все хорошо с логикой c. Как все мы знаем, inline CSS будет загружаться быстрее, если размер контента CSS загружается быстрее, чем ваш сервер будет отвечать на запрос файла external CSS (с учетом времени DNS, задержки сервера и т. Д. c).

Вы можете использовать inline css здесь с style={{/*your styles */ }}.

Вы можете проверить некоторые хорошие ответы, как уже упоминалось некоторые ответы в SO .

0 голосов
/ 27 апреля 2020

Ну, вы сделали хороший поиск и получили правильные результаты. Как вы сказали, использование «важных» элементов bootstrap не считается правильным методом, но нет другого способа изменить элементы bootstrap, кроме как воздействовать на их собственные файлы css. Для этого вы можете назначить CSS inline, как вы говорите «{{style: // like this}}», или вы можете создавать свои собственные bootstrap классы. Если вы хотите работать с библиотеками в других стилях, вы можете использовать такие библиотеки, как material-ui. Как вы сказали, есть 4 варианта:

1: встроенный Css:

<Navbar.Brand href="#home" id="navigation-bar" style = {{color:'white'}}>TURLS</Navbar.Brand>

2: пользовательский Css: 

 #navigation-bar {
       color : white !important;
    }

3: Действует на собственных Bootstrap файлах css: 

//in nodemodules, the bootstrap files that you downloaded to the navbar-related parts to affect.

4: классы реагирующего использования, которые не поставляются с bootstrap, но могут использоваться на bootstrap сторона: 

<Navbar.Brand className = "text-light" href="#home" id="navigation-bar">TURLS</Navbar.Brand>

Удачи! :)

...