I want to import fontAwesome for my dialog-component-css, but the import affects also my main page.
The following import has been made in my dialog-component.css:
#import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.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 .
I am very new to UI libraries and CSS in React. I'm using a data picker from Ant Design: https://ant.design/docs/react/introduce.
They provide CodePen examples and in the CSS tab you can see this:
#import 'antd/dist/antd.css';
However, when I add this to my CSS stylesheet which I import in to the component using import './Component.css'; I get the error
Module not found: Can't resolve './antd/dist/antd.css'
in the components folder.
I have installed the npm package but can't get the CSS to work.
What am I doing wrong?
Make sure antd is installed correctly and it's visible in your package.json it should be there
"antd": "3.19.2" assuming you ran npm i antd
as well as importing it in your component with
import { DatePicker } from 'antd';
Then import the style manually in your component
import 'antd/dist/antd.css';
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')