I use react-bootstrap, but I want to modify some of the elements, so I wrote my own custom.css. However it doesn't make any changes (only when I put !important, but the file is so large so it's not a good option).
import {MenuItem, Nav, Navbar, NavBrand, NavDropdown, NavItem} from "react-bootstrap";
import {LinkContainer, MenuItemLink} from "react-router-bootstrap";
import '../assets/css/custom.css';
This is what I did so far.
When are you importing the Bootstrap CSS? I have an app which successfully uses Bootstrap with some overrides, which does this at the top of its index.js:
require('bootstrap/dist/css/bootstrap.min.css')
require('./bootstrap-overrides.css')
Related
I am doing a ReactJS project. At first, the project was only written in pure CSS, then I wanted to use a small Antd component for my project. I followed the instructions and imported like this into a specific ReactJS component:
import { Pagination } from 'antd';
import 'antd/dist/antd.css';
The issue is that my existing CSS is overridden by Ant Design. Can you please give me a solution?
you just have to import your own css file after you import your AntDesign file.
eg.
import { Pagination } from 'antd';
import '../ownstyle.css'
in you ownstyle.css
#import 'antd/dist/antd.css';
.ant-pagination{
.....
}
I'm building a website with gatsby and I have set up the gatsby scss plugin. Everything seemed to be working fine until I realized my styles from home.module.scss were also being applied to my navigation component that only imports navbar.module.scss.
I have a style for my buttons in each of these modules that looks like this...
button {
// different styles in the different modules
}
Both of these modules import a global scss file at the top like this...
#import '../styles/global.scss';
The react components only import their respective modules. In my main index component I import global styles like this import './global.scss'
Am I misunderstanding how scss modules work in React or is this is a bug?
from my understanding
In react importing SCSS or CSS in any component will be global.
So it will affect all other components as similar to the component where you imported the SCSS file.
use different class names
When I add new HTML code to my React app , the CSS styles from the App.css file aren't applying anymore , until I retype Import './App.css'" in the head.
Any solution please.
All our components in React act like modules and have their data (variables, functions) private to them. To access code or styles from other files we need import from other modules.
Our App.js is also one such component. Until you do import './App.css', the CSS will not be applied to App.js.
Problem solved , it was about bootstrap .
Import bootstrap/dist/css/bootstrap.min.css before App.css .
I was doing the opposite .
In my React Application,i'm using React-Bootstrap and i've imported
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
In order to style some other components, i imported MDBreact library, when i did so,the components (that were styled using bootstrap.min.css) have been effected by the exist of MDB library.
Any suggestion to resolve this issue would be appreciated
Theorically, just import what you need where you need it ? You usually import bootstrap in your main component, but if you want it only in a child, nothing prevent you from importing it here.
I'm trying to apply separate styleSheets for every child component by importing different styleSheets in different components but fails to achieve this as styles are being overwritten.
Sample Code: Stackblitz
childa.jsx:
import React from 'react';
import "./childa.css"
export default () => <h1>Child A!</h1>;
childa.css:
h1 {
color: blue;
}
childb.jsx:
import React from 'react';
import "./childb.css"
export default () => <h1>Child B!</h1>;
childb.css:
h1 {
color: red;
}
This is just a sample code. Need solution for a project having large styleSheets.
Based on your clarification in one of your comments:
The thing is I'm converting a project from angular to react and all
the css is already written so I can't use inline style. Is there any
way in which I don't have to rename all the css classes in all the
stylesheets?
Short ans: You can't achieve that as of now.
This article explains all the different ways to style react components. In your case, the best that you can do is use css modules and rename generic classes like h1 to .h1.
Check this great article about css modules: Modular CSS with React.
Note: css modules are not available in create-react-app. If you must use it here's an
article on how to use CSS Modules with create-react-app.
I think this is caused by ther order of the imports.
In your parent component you have something like
import React from 'react'
import ChildA from './ChildA'
import ChildB from './ChildB'
This means that in the compiled code you'll have the two stylesheets imported one after the other, and the second h1 rule will overwrite the first
You should use classes for your components, or use inline style
Importing a css does not wrap it in the scope of the component is just a straight import into the DOM. In order to mantain a separation of components styles you have to approach with another solution, as styled-components.
This may not work for your entire application, but I fixed it by applying a class to the element (.childA and .childB). This solved the problem.
export default () => <h1 className='childB'>Child B!</h1>;