I created a project using electron react boilerplate
https://github.com/electron-react-boilerplate/electron-react-boilerplate
Everything works, but I decided to add antd (ant design)
yarn add antd
Then I import the antd styles
index.tsx
...
import "./styles/global.css";
import "./styles/fonts.css";
import "antd/dist/antd.css"
...
Next I used a button of type primary
some_component.tsx
import React from "react";
import s from './someComponent.module.scss'
import { Button } from "antd";
export const SomeComponent: React.FC = () => {
return <div className={s.root}>
<Button type={'primary'}> button text </Button>
</div>
}
But the style of the button remains the same (with standard styles)
I tried importing the component styles directly into my global.css, also tried adding to the component style, but that didn't change anything
#import "~antd/dist/antd.css";
I have looked into the following repository where it works, however I didn’t figure out how to add it to my project. I don't want to use this repository as it works crookedly and doesn't use typescript
Thanks!
you can add this import in App.global.css or create new one custom.global.scss
copy this line
#import '~antd/dist/antd.css';
then import this scss into your App.tsx
import './custom.global.scss';
This should work
Related
Now, I am stuck for several hours trying to make Storybook work with antd in my new React application (created with create-react-app), without success.
Whatever I do, Storybook does not take the styling of antd.
For example, I created a menu item with antd:
menuNav.tsx:
import React from "react";
import {Menu} from 'antd';
import "antd/dist/antd.less";
const MenuNav = () => {
return (
<Menu mode="horizontal">
<Menu.Item key="menu1">
This is my menu title
</Menu.Item>
</Menu>
)
}
export default MenuNav;
But the result looks like this, no styling at all, but a list:
And as you can see here, it understands that the menu is created by the UI library, but there is no antd styling applied:
This is the story file of MenuNav, 3-Menu.stories.js:
import React from "react";
import MenuNav from '../components/MenuNav';
export default {
title: "MenuNav",
component: MenuNav,
};
export const Text = () => <MenuNav></MenuNav>
I already tried to add a config.js inside ./storybook as suggested here, with no success. Furthermore, I tried adding a webpack.config.js in the same directory as recommended here, same result.
What am I doing wrong?
try adding #import '~antd/dist/antd.css'; to your applications main file, let say index.css which for example is placed in src folder and then add import '../src/index.css'; to .storybook/preview.js
`
I used my react TypeScript project for ant-design, I have some issue when I reload the page, css loading delay, any reason for this?
I imported my main.css to
#import './../node_modules/antd/dist/antd.css';
Actually, based on And Design Doc about getting a start, You could use babel plugin for automatic loading used components like below, it is a recommended way:
// .babelrc or babel-loader option
{
"plugins": [
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // `style: true` for less
]
}
By using this way (from docs):
This allows you to import components from antd without having to manually import the corresponding stylesheet. The antd babel plugin will automatically import stylesheets.
So you can import the component easily and there is no need to load CSS manually, just like below:
import { Button } from 'antd';
But if you don't want to use the above plugin, you can use Ant Desing component by importing its CSS inside each component like below:
import React from 'react';
import Button from 'antd/es/button';
import 'antd/es/button/style/css'; // <<=== this way
import './CustomButton.css';
const CustomButton = () => (
<div className="custom-button">
<Button type="primary">
Button
</Button>
</div>
);
And there is another way, use your own CSS or SCSS or LESS, but import the component CSS at the top of your component CSS system, just like below exactly like docs:
// the custom component
import React from 'react';
import Button from 'antd/es/button';
import './CustomButton.css';
const CustomButton = () => (
<div className="custom-button">
<Button type="primary">
Button
</Button>
</div>
);
// the CustomButton.css file
#import '~antd/es/button/style/css';
.custom-button {
background-color: red; // for example
}
Also, you can use the whole Ant Design CSS instead of using separately each component. I mean this:
import 'antd/dist/antd.css';
Instead of this:
import 'antd/es/button/style/css';
For this way of loading CSS, it is better to import it once at the root of the project or the CSS system.
HINT: I prefer the first, using babel plugin, it is safe, more clear and more readable.
Replace
#import './../node_modules/antd/dist/antd.css';
with
#import '~antd/dist/antd.css';
This is given in the documentation you linked.
Can someone please explain how to add bootstrap to react app and how to use them inside react components since we can not add CDN links and "class" attribute inside a react app. Would you kindly please explain how to use bootstrap components inside react app. This will really helpful for me since i'm a very beginner to react developer..
Read this
https://react-bootstrap.github.io/getting-started/introduction
1. install react-bootstrap
npm install react-bootstrap bootstrap
2. import css file in your index.js or app.js
import 'bootstrap/dist/css/bootstrap.min.css';
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
3. import components like
import { Button } from 'react-bootstrap';
You can use normal bootstrap classes like className="row"
You can't use bootstrap directly in react application instead you can use reactstrap which contains the bootstrap components.
Example of using reactstrap inside react
import React from 'react';
import { Button } from 'reactstrap';
export default (props) => {
return (
<Button color="danger">Danger!</Button>
);
};
If you want standard Bootstrap
install
npm i bootstrap
import in App.js
import 'bootstrap/dist/css/bootstrap.css';
import "bootstrap"; // <-- JS File
I am new to React, I have some confusion related to CSS styling related to rwmc components.
I am just rendering two Button components on web page by importing it from '#rmwc/button' package. I am following this tutorial
https://jamesmfriedman.github.io/rmwc/buttons
I have also imported material design for this component like
import '#material/button/dist/mdc.button.css';
Now I have two buttons on my screens, for one of the button component, I have mentioned className property. In that class button color is just getting red which is working fine but I am wondering here, besides changing color of button, all other css defined in mdc.button.css are just getting applied to this as well, I don't know why is it happening so, Is this a correct behavior.
I am asking this because I have read here that
https://jamesmfriedman.github.io/rmwc/styling-theming
All of the components have the material-components-web classNames on them and you can add your own which means you are changing main class.
Any help will be appreciated.
Code:
import React from 'react';
import ReactDOM from 'react-dom';
import { DrawerHeader } from '#rmwc/drawer';
import { Button, ButtonIcon } from '#rmwc/button';
import '#material/button/dist/mdc.button.css';
//import styles from './index.module.css';
import './index.css'
const MyComponent = props => (
<div>
<Button>Default</Button>
<Button className="myDrawerHeader">Default2</Button>
</div>
);
ReactDOM.render(<MyComponent />, document.getElementById('root'));
index.css
.myDrawerHeader {
color: red !important;
}
Output on the screen is coming this which I think is wrong. Why all other styles from .mdc are getting applied to second button, I have just changed color of it.
screen-output-now
I think the behavior here is correct. Both the buttons have material-components-web css className and what you are doing is, adding another class to it. You are not actually changing the main class, you are extending the css styles of the second button using another class.
It behaves underneath as,
<button className="material-components-web">Default</button>
<button className="material-components-web myDrawerHeader">Default2</button>
I agree with Vishmi Money, the behavior is expected. When looking at the source code of the lib you used, its appeared a comment for classname props,
https://github.com/jamesmfriedman/rmwc/blob/master/src/button/index.js
/** Additional className for the button */
className?: string
So I think the idea is beside default classes you can define your own class and if you want to override some default behaviors then you can write it in your own class.
I put the spinner on the page and I see nothing at all. There are no console of errors or anything like that.
Here is my code:
import React, { Component } from 'react';
import { Spin } from 'antd';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<Spin />
</div>
);
}
}
export default App;
The accepted answer imports all of the library styles.
Here's a preferred way to do so
import Spin from 'antd/es/spin';
import 'antd/es/spin/style/css';
I believe you have forgotten to import the CSS for AndD.
#import '~antd/dist/antd.css';
https://ant.design/docs/react/use-with-create-react-app
The proposed solution by #HalfWebDev doesn't explain that why one should import the CSS at the component level.
Probably this is the reason Remove global Styles
But I would like to add that the proposed solution by #HalfWebDev still doesn't work. Which is to import the component level CSS only like this
import 'antd/es/spin/style/css';
The above CSS still continues adding some global styles and disturbs my styling.
Instead importing the CSS with this method worked for me
import 'antd/lib/spin/style/index.css';