I tried to use antd with create react app.
I installed antd in project using
yarn add antd
Added a button using antd's button component
import React, { Component } from 'react';
import Button from 'antd/lib/button';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<Button type="primary">Button</Button>
</div>
);
}
}
export default App;
Still, button did not rendering correctly. When inspecting the element, I find that antd classes are being applied. It's just that css is not loaded.
I had to add antd/dist/antd.css at the top of src/App.css.
#import '~antd/dist/antd.css';
.App {
text-align: center;
}
I figured out this from antd's official docs for using with Create React App
So all the steps required are to install antd
yarn add antd
Use a component from antd
import React, { Component } from 'react';
import Button from 'antd/lib/button';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<Button type="primary">Button</Button>
</div>
);
}
}
export default App;
And import antdcss in main css file (src/App.css)
Although verified answer works, you could minimize the size of the CSS bundle in the build by only importing required CSS as follows.
import Button from 'antd/lib/button';
import 'antd/lib/button/style/css'; // importing only the required CSS
Update
Recently noticed even importing antd components according to above mentioned way(strike through text) it still adds unnecessary JS in to the build,
I even tried react-app-rewired in ant design docs issue still the same ( still adds unnecessary JS in to the build ). So I opened an issue on the antd repo : https://github.com/ant-design/ant-design/issues/13274
Update 2:
Please take a look at : https://github.com/ant-design/ant-design/issues/12011
After installing antd in your project you can import button as
import {Button} from 'antd';
First install less-loader on npm via npm i less-loader,
then create a index.less folder on the index.js directory.
paste this on index.less -> #import "~antd/dist/antd.dark.less";
After that import this .less file to your index.js and have fun :)
You can find some other methods here
You can also use craco(create react app config override) but its more complicated.
Related
Im trying to use Accordion in Bootstrap React but Visual Studio Code is complaining that it cant find it.
As the docs states I only needed to include a import of Accordion?
What I imported: import { Col, Row, Container, Form, Accordion } from "react-bootstrap";
How can I fix this? It's not possible to import Accordion.Header for instance.
You can try using them as classes?
example: class="accordion-header". Give it a try.
Didn't found anything on their docs.
Or
something like this: import { Col, Row, Container, Form, Accordion: { Body, Header} } from "react-bootstrap";
Sorry for making it as an anwser, i can't make comments yet
I think this question may expand beyond React, but I'm still not sure if React itself is responsible for the problem.
The environment is React with TypeScript. I use CSS imports in the component files, so that each component has its specific stylesheet and I presume that those styles will not be added to the <head> element until the respective component is instantiated. But it turns out that if I import a component from a file, which just reexports all of them, the styles of all the other components, which I do not use, are still added in the DOM.
Here is a simple example, let's say I have two simple components in the lib folder - Avatar and Button. They look like this (the Button is similar):
import React from 'react';
import './avatar.css';
const Avatar: React.FC = (props: any) => {
return (
<div className="avatar">
{props.children}
</div>
);
}
export { Avatar };
Then I add index.ts to reexport the components, in order to have simple import path:
import { Avatar } from './Avatar';
import { Button } from './Button';
export { Avatar, Button };
And finally, in my AppComponent I want to use only the Button component:
import React from 'react';
import { Button } from './lib';
const App: React.FC = () => {
return (
<div className="App">
<Button>example</Button>
</div >
);
}
export default App;
To my surprise, in the <head> element there are <style> tags not only for the Button, but also for the Avatar. Why is this happening? Is my reexport configuration wrong?
Notice that if I import the component directly from its file - import { Button } from './lib/Button' I do not get the Avatar styles.
The example is really simple, but the real scenario is related to a React component library, which contains a lot of components with a lot of stylesheets. I want to avoid inserting so many <style> tags in the DOM, unless they are really needed.
Thank you for spending time on this!
so that each component has its specific stylesheet and I presume that those styles will not be added to the element until the respective component is instantiated
This presumption is wrong. React uses webpack to bundle its files and the way webpack works for CSS imports is that it loads all the CSS files that your project depends on and put them in the <head> element right at the beginning.
You might ask: Then how do I keep my styles separated and don't get them mixed.
There are three solutions to this
A good way is to Add a CSS Modules Stylesheet
Another suggestion is to make the <div> that wraps your component have a className that is the same name as the component so your component will look like this
export default class ComponentOne extends Component {
...
render() {
return(
<div className="ComponentOne">
...
</div
)
}
}
And your component CSS file will look like:
.ComponentOne div img {
...
}
.ComponentOne .class-one {
...
}
With this way, using CSS preprocessor like SASS will come in handy, so your .scss file will simply begin with:
.ComponentOne {
...
}
Another solution is to have the styles as an object inside your component. This way the style will only be scoped to your component and will be removed when the component unmounts, but then you will lose the ability to easily create #media queries andother special effects like:hover` plus this approach is not recommended for small components that get mounted and unmounted too often because this creates a performance issue once the application gets larger
You also might ask: since all the style sheets get imported at the begging, then why don't I put all my styles in one big style sheet and not splitting them up.
Other than the fact that splitting your styles will make them easy to handle so that each component will have its separate CSS file and webpack will handle importing them, There is one other benefit:
Say you have a feature1 component which also has a feature1.css file. In the beginning, when you have feature1 imported in your main app, webpack will also import its style sheet and put it in the <head> element.
But say in the future you decided you don't want to use feature1 component anymore and you are using another feature2 component now which has its own feature2.css file. Now since no other component is importing feature1 component, webpack will also ignore importing feature1.css into the <head> element.
The switch component Blueprint (demo and documentation here) displays no border when selected/unselected. I included this component in a React component as follows:
import {Component} from "react";
import {Switch} from "#blueprintjs/core";
import React from "react";
class BPrintMain extends Component{
render(){
return (
<Switch id="switch-input-3" label="Public" disabled={false} />
)
}
}
export {BPrintMain};
When I click the switch component, it displays a border as follows:
The border remains until the focus is lost, that is, I click on something else on the page.
I am including the Blueprint css files from the css of my main componeent as follows:
#import "~#blueprintjs/core/lib/css/blueprint.css";
#import "~normalize.css";
#import "~#blueprintjs/icons/lib/css/blueprint-icons.css";
The css appears to be working for buttons, input controls etc. What am I missing? Why is the switch displaying that focus/bounding box on focus?
Ok, I found the answer. Leaving it here in case someone else gets bitten by this and uses my choice of words for expressing the problem.
As explained in this github issue this is expected behaviour of browsers: display the element with focus. As the answer in the issue says, simply adding the following two lines to your app (I did it in index.js, the root of my React app) solves the problem:
import { FocusStyleManager } from "#blueprintjs/core";
FocusStyleManager.onlyShowFocusOnTabs();
I have a react component called "header" which is going to be the header element on my webpage. Currently, all I have for the header component is:
import React from 'react';
import '../header/header.scss';
export default class Header extends React.Component {
render() {
return <div className="alignment">Test</div>
}
}
and my stylesheet is also simple:
.alignment{
text-align: center;
}
I placed the header component on my main App.js page, but the text alignment isn't showing up. I used Chrome debugger tools, and it is not even showing up in the styling as a class. I'm not sure what else to do, maybe I'm missing an import somewhere?
I'm building a React app that has links pointing to predefined routes.
Click Here
The routes resolve fine, but it's refreshing the page, thereby slowing down app performance. How do I avoid re-rendering the entire page?
Fix the problem by using the <Link> tag included with react-router.
import React from "react";
import { Link } from 'react-router-dom';
export class ToolTip extends React.Component {
render() {
return (
<Link to="/My/Route">Click Here</Link>
)
}
};
First answer was correct but I didn't found Link from react-router-dom. It was in my case here:
import { Link } from 'react-router';
You need to:
import { Link } from "react-router-dom"
then import the component you wish to go to
import Example from "./component/Example"
Then use Link like this
<Link to="/Example">
<h4>Example Page</h4>
</Link>
This will stop the refreshing.
Note that, if to="/Example" matches a route you've specified in your BrowserRouter and then it sends you there.
Learn more here Reat Training / React Router
Hi semantic ui react example
<Menu.Item name="NotFound" as={NavLink} to="/dadsadsa" />
In case the above methods don't work, check if you are importing the right component where you are defining the routes. (In my case, I imported a component with the same name but from a wrong path)