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';
Related
my name is Daniel Asa. I have a React project. I am creating it using React with a CSS framework called tailwindcss. I ran the React project, but the changes I made in the first part of the project are not applied, if the codes themselves I changed the React and deleted the src folder of the React, the code is executed and the changes are not applied, there is also an error in the browser section, but it has nothing to do with what it is.
The codes are below:
index.js
import React from "react";`
import ReactDOM from "react-dom";`
import App from "./App";`
import './index.css';`
ReactDOM.render(`
<React.StrictMode>`
<App />
</React.StrictMode>`
, document.getElementById("root"));
This is the new src folder codes^
And the following codes are index .css codes:
#tailwind base;
#tailwind components;
#tailwind utilities;
And the codes below are App.js codes:
import React from 'react';
function App() {
return (
<div className='w-screen h-screen bg-blue-400 flex justify-center items-center text-base font-bold'>
App
</div>
);
}
export default App
and right-clicked in the browser section and clicked the inspect option and entered the console section and this error:
react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
printWarning # react-dom.development.js:86
When I got into the links it was
Function.prototype.apply.call(console[level], console, argsWithFormat);
And above it is a multiplication sign that gives this message:
Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
I translated it well myself, I understood that I used createRoot instead of render, but it still didn't work
And after I saw the error again in the browser it gave this:
Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".
And I did this:
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import './index.css';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
But this time, not only the error was not given, the changes were not implemented.
Please, if anyone knows, help, thanks☻☻☺♥
I repeated several times, I changed the css codes, but still nothing. I saw some articles from the main site and some videos from YouTube about the css framework, but it didn't work.
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{
.....
}
Currently I'm using google fonts icons in my project, but I want to use also FAS5 Icons
I'm using this vuetify configuration, but the documentation doesn't say anithing about this.
import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
import colors from "vuetify/lib/util/colors";
import '#fortawesome/fontawesome-free/css/all.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
Vue.use(Vuetify);
export default new Vuetify({
theme: {
...
},
icons: {
iconfont: 'fa'
}
});
This is a clumsy example of what I'm doing. But I'm afraid this is bad practice and may create bugs or errors
<v-btn icon #click="$vuetify.theme.dark = !$vuetify.theme.dark">
<v-icon>nightlight_round</v-icon>
</v-btn>
<v-btn icon #click="$vuetify.theme.dark = !$vuetify.theme.dark">
<v-icon>fa-moon</v-icon>
</v-btn>
Is there a proper way to achieve this?
As mentioned in this vuetify issue:
You need to install all fonts you need or add links to CDNs, iconfont only specifies which icon set will be used for default Vueitfy icons
So there is no way to load multiple fonts on initialization.
I would keep the mostly used font as default in the Vuetify config and load the other one as needed. In the Vuetify docs the same implementation of FA5 as yours is shown, so I would say you've done it correctly.
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.