मैं रिएक्ट और बूस्ट्रैप दोनों के लिए नया हूं, इसलिए मैंने react-bootstrap का उपयोग करके उनके साथ खेलना शुरू कर दिया है। मैंने सुना है कि बूटस्ट्रैप सीएसएस को ओवरराइड करने के सबसे सरल तरीकों में से एक बूटस्ट्रैप सीएसएस के शीर्ष पर अपना स्वयं का सीएसएस लागू करना था। तो मेरे पास निम्न पृष्ठ है

enter image description here

मेरे पास निम्नलिखित हैं App.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;

निम्नलिखित है 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; 
}

मैं अपने स्वयं के CSS का उपयोग करके Nav.Brand के फ़ॉन्ट और रंग को ओवरराइड करने और CSS #id चयनकर्ता का उपयोग करके इसे संदर्भित करने में सक्षम था। लेकिन मैं कस्टम CSS वर्ग .whte का उपयोग करके Nav.Link को ओवरराइड करने में सक्षम नहीं था। मैं होम और API के रंग को ओवरराइड करने का प्रयास कर रहा था, फ़ॉन्ट, pills आकार और पृष्ठभूमि रंग बदलना चाहता था, लेकिन मुझे नहीं पता कि कैसे .

मैं !important का उपयोग करके टेक्स्ट का रंग बदल सकता हूं, लेकिन मैंने कहीं पढ़ा है कि इसका उपयोग करना चीजों को अनुकूलित करने का एक अच्छा तरीका नहीं था। तत्वों का निरीक्षण करने पर, मुझे पता चला कि Nav.Links मेरे कस्टम वर्ग .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 को बदलने या अनुकूलित करने के अनुशंसित तरीके को समझने की कोशिश कर रहा हूं।

आपकी सहायता के लिए धन्यवाद

1
Auro 26 अप्रैल 2020, 20:05
Nav.Link की प्राथमिकता .whte से अधिक है। यदि आप Nav.link को ओवरराइड करना चाहते हैं तो आपको अपने चयनकर्ता को उस तरह Nav.whte{...} या शायद #id.whte{...} का उपयोग करके लिखना होगा।
 – 
h3t1
26 अप्रैल 2020, 20:18

2 जवाब

आप अपने तर्क के साथ अच्छे जा रहे हैं। जैसा कि हम सभी जानते हैं एक inline CSS तेजी से लोड होगा यदि आपके सर्वर की तुलना में सीएसएस सामग्री का आकार तेजी से डाउनलोड होता है, एक external CSS फ़ाइल अनुरोध (DNS समय, सर्वर विलंबता, आदि को ध्यान में रखते हुए) का जवाब देगा।

आप यहां इनलाइन सीएसएस का उपयोग style={{/*your styles */ }} के साथ कर सकते हैं।

SO में कुछ उत्तर बताए गए अनुसार आप कुछ अच्छे उत्तर देख सकते हैं।

0
user7109146user7109146 27 अप्रैल 2020, 03:01

खैर, आपने अच्छी खोज की और आपको सही परिणाम मिले। जैसा कि आपने कहा, बूटस्ट्रैप तत्वों पर "महत्वपूर्ण" का उपयोग करना सही तरीका नहीं माना जाता है, लेकिन बूटस्ट्रैप तत्वों को बदलने के लिए अपनी स्वयं की सीएसएस फ़ाइलों को प्रभावित करने के अलावा और कोई तरीका नहीं है। इसके लिए आप CSS इनलाइन असाइन कर सकते हैं जैसा आप कहते हैं" {{style: //like this}}" या आप अपनी खुद की बूटस्ट्रैप क्लासेस बना सकते हैं। यदि आप अन्य शैलियों में पुस्तकालयों के साथ काम करना चाहते हैं, तो आप सामग्री-यूआई जैसे पुस्तकालयों का उपयोग कर सकते हैं। जैसा आपने कहा, 4 विकल्प हैं:

1: इनलाइन सीएसएस:

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

2: कस्टम सीएसएस:

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

3: बूटस्ट्रैप की अपनी सीएसएस फाइलों पर कार्य करना:

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

4: प्रतिक्रिया-उपयोग वर्ग जो बूटस्ट्रैप के साथ नहीं आते हैं लेकिन बूटस्ट्रैप पक्ष पर उपयोग किए जा सकते हैं:

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

आपको कामयाबी मिले ! :)

0
CanUver 27 अप्रैल 2020, 03:04
style={{/*your inline styles */ }} इनलाइन के लिए ऐसा होना चाहिए जैसा आपने बताया {{style : //like this}}
 – 
Tammy
27 अप्रैल 2020, 03:06
यह कोई गलती नहीं है। यह इस तरह होना चाहिए?
 – 
CanUver
27 अप्रैल 2020, 03:11
यदि आप react का उपयोग कर रहे हैं तो यह style={{/*your inline styles */ }} होना चाहिए जैसा कि आपने <Navbar.Brand href="#home" id="navigation-bar" style = {{color:'white'}}>TURLS</Navbar.Brand> में उल्लेख किया है। w3schools.com/react/react_css.asp से चेकआउट करें
 – 
Tammy
27 अप्रैल 2020, 03:15