4

In my applications app.js, I load bootstrap CSS inside my react helmet for some reason, but loads after components customs styles loads. So some of my overrides styles not working. how can i load react-helmet CSS before the components?. Please help me on that

app.js

import React, { Component, Suspense, lazy } from "react";
import ...mycomponents
class App extends Component {
render() {
<div>
<Helmet>
 <link
  type="text/css"
  rel="stylesheet"
  href="vendors/bootstrap/css/bootstrap.css"/>
</Helmet>
<Switch>
  <Route path="/home">
    <Home {...this.props} />
  </Route>
</Switch>
</div>
}
}

So need to load bootsrap.css before home component loads.

Praveen Kumar
  • 161
  • 1
  • 6
  • Even if order of CSS files change you can make your selectors more specific to override `bootstrap.css`. Can you give me example of some CSS selector which is being overridden? And how are you managing styles in React? styled-components or simple import? – Pankaj Phartiyal Nov 23 '20 at 18:39
  • I just use simple import @Pankaj Phartiyal. We just need that helmet inside css runs first before the home.css in component. – Praveen Kumar Nov 24 '20 at 04:39
  • why not use link tag directly in head instead of Helmet? – Pankaj Phartiyal Nov 26 '20 at 01:52
  • Because I need to change the different CSS files dynamically using the Helmet based on params. @PankajPhartiyal. – Praveen Kumar Nov 30 '20 at 03:43

0 Answers0