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';
Related
I am facing problem with external css files on my react project. I am using material UI components. In the react components folder I created css file for each components but they are not loading when i hard reload the site.
I wanted to use external css rather than styled components or material ui style syntax.
Just import the css / scss file in your component and make sure you've added the classes for the elements.
If you are looking a more generic option you can import your style.css file in your main App.jsx (if you call it "App.jsx") file. Then you just use the className and will have access to your css.
App.jsx file
import './style.css'; // Your path to your style.css
function App() {
return (
<div>React app</div>
);
}
export default App;
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 am not a front end developer so this is I guess a newbie question.
I have developed a first version of my react app where I use semantic css I have installed the package then imported it in my index.js file :
import 'semantic-ui-css/semantic.min.css';
This has allowed me to syle my components with semantic CSS and it works fine.
Now for my second version I would like to add fontawesome, so i did the same I installed the packages required :
npm i --save #fortawesome/react-fontawesome
npm install --save font-awesome
And imported the package again in index.js
import 'font-awesome/css/font-awesome.min.css';
However this does not style my components with fontawesome classes :
Example :
class CardButton extends React.Component {
render() {
return (
<button className="button button-primary">
<i className="fa fa-chevron-right"></i> Find out more
</button>
);
}
}
export default CardButton;
this does not get styled
you would need to import this too, try to import them too, then it will work for sure, you missing out importing dependencies,
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/css/bootstrap.css';
import 'font-awesome/css/font-awesome.min.css';
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 .
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.