React component CSS file CSS code does not work. Component file CSS has been importedą„¤
import React from 'react';
import { Carousel } from 'react-bootstrap';
import './Banner';
Instead of using import './Banner'; use this import './Banner.css';.
Or
In General,
use import './styleFileName.css';
to import any CSS file.
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 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);
I decided to use react-bootstrap at one single route among others. I imported bootstrap CSS ONLY to my component and it looks good. But when I go to other routes, bootstrap overrides styles there, too (it affects everything: paragraphs, titles, etc). If I update the page at another route - styles become good, according to my custom sass styles. Is it possible to make Bootstrap styles work ONLY on one route and don't affect other routes?
App.js
---
import { MyComponent } from './components/MyComponent/MyComponent';
...
<Route path="/mycomponent" render={
() =>
<MyComponent
...props
/>
} />
MyComponent.jsx
---
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './css/MyComponent.css';
I didn't import Bootstrap CSS styles to other components
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';
Using React and classnames to do styles. I get no errors but I get undefined when I console.log(styles.uiPad). I do get an object when I console.log(styles). My classnames import component also gets console.logged successfully but nothing happens. What am I doing wrong? Is this a webpack thing?
Here are my imports:
import styles from '../assets/stylesheets/base.scss'
import classNames from 'classnames'
This is my render:
<div className={classNames(styles.uiPad)}></div>
You are importing a Sass file. You need to compile Sass into CSS before importing it.