import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
```
### TypeScript
`antd` está escrito en TypeScript con definiciones completas, ver Usar en TypeScript [Usar en TypeScript](https://ant.design/docs/react/use-in-typescript) para comenzar.
@ -54,10 +54,10 @@ Some components use dynamic style to support wave effect. You can config `csp` p
| form | Set Form common props | { validateMessages?: [ValidateMessages](/components/form/#validateMessages), requiredMark?: boolean \| `optional` } | - | requiredMark: 4.8.0 |
| getPopupContainer | To set the container of the popup element. The default is to create a `div` element in `body` | function(triggerNode) | () => document.body | |
@ -7,10 +7,6 @@ Here are the frequently asked questions about Ant Design and antd that you shoul
---
## Will you provide Sass/Stylus(etc.) style files in addition to the Less style files currently included?
There is currently no plan to add support for Sass/Stylus(etc.) style files, but using tools on Google you can easily convert the provided Less files to your desired style format.
## Is there a difference between `undefined` and `null` in the controlled components of `antd`?
**Yes. antd will treats `undefined` as uncontrolled but `null` as controlled components which means empty value of it.**
According to the [Customize Theme documentation](/docs/react/customize-theme), we need to modify less variables via loader like [less-loader](https://github.com/webpack/less-loader). We can use [craco-less](https://github.com/DocSpring/craco-less) to achieve that,
Ref to the [Customize Theme documentation](/docs/react/customize-theme-v5). Modify theme with ConfigProvider:
First we should modify `src/App.css` to `src/App.less`, then import less file instead.
```diff
/* src/App.ts */
- import './App.css';
+ import './App.less';
```
```diff
/* src/App.less */
- @import '~antd/dist/antd.css';
+ @import '~antd/dist/antd.less';
```
Then install `craco-less` and modify `craco.config.js` like below.
```bash
$ yarn add craco-less
```
```js
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '@primary-color': '#1DA57A' },
javascriptEnabled: true,
},
},
},
```tsx
import React from 'react';
import { ConfigProvider } from 'antd';
export default () => (
<ConfigProvider
theme={{
token: {
colorPrimary: '#00b96b',
},
],
};
}}
>
<MyApp/>
</ConfigProvider>
);
```
By adding `modifyVars` option of [less-loader](https://github.com/webpack/less-loader#less-options) here, we should see a green button rendered on the page after rebooting the server now.
We provide built-in dark theme and compact theme in antd, you can reference to [Use dark or compact theme](/docs/react/customize-theme#Use-dark-or-compact-theme).
> You could also try [react-app-rewired](https://github.com/timarney/react-app-rewired) and [customize-cra](https://github.com/arackaf/customize-cra) to customize create-react-app webpack config like craco did.
## Alternative ways
Follow manual in [Adding TypeScript](https://create-react-app.dev/docs/adding-typescript) to setup TypeScript development environment if you already create a project by [Use in create-react-app](/docs/react/use-with-create-react-app).
According to the [Customize Theme documentation](/docs/react/customize-theme), we need to modify less variables via loader like [less-loader](https://github.com/webpack/less-loader). We can use [craco-less](https://github.com/DocSpring/craco-less) to achieve that,
Ref to the [Customize Theme documentation](/docs/react/customize-theme-v5). Modify theme with ConfigProvider:
First we should modify `src/App.css` to `src/App.less`, then import less file instead.
```diff
/* src/App.js */
- import './App.css';
+ import './App.less';
```
```diff
/* src/App.less */
- @import '~antd/dist/antd.css';
+ @import '~antd/dist/antd.less';
```
Then install `craco-less` and modify `craco.config.js` like below.
```bash
$ yarn add craco-less
```
```js
const CracoLessPlugin = require('craco-less');
```tsx
import React from 'react';
import { ConfigProvider } from 'antd';
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '@primary-color': '#1DA57A' },
javascriptEnabled: true,
},
},
},
export default () => (
<ConfigProvider
theme={{
token: {
colorPrimary: '#00b96b',
},
],
};
}}
>
<MyApp/>
</ConfigProvider>
);
```
By adding `modifyVars` option of [less-loader](https://github.com/webpack/less-loader#less-options) here, we should see a green button rendered on the page after rebooting the server now.
We provide built-in dark theme and compact theme in antd, you can reference to [Use dark or compact theme](/docs/react/customize-theme#Use-dark-or-compact-theme).
> You could also try [react-app-rewired](https://github.com/timarney/react-app-rewired) and [customize-cra](https://github.com/arackaf/customize-cra) to customize create-react-app webpack config like craco did.
## eject
You can also eject your application using [yarn run eject](https://facebook.github.io/create-react-app/docs/available-scripts#npm-run-eject) for a custom setup of create-react-app, although you should dig into it by yourself.
@ -44,22 +44,7 @@ If the above palettes do not meet your needs, you can choose a main color below,
### Programmatic Usage
We provide Less and JavaScript usage for developers.
- **Less**
```less
@import '~antd/es/style/themes/default.less';
.selector {
color: @blue-5;
background-color: @gold-2;
}
```
Color less variables: [color.less](https://github.com/ant-design/ant-design/blob/5ab2783ff00d4b1da04bb213c6b12de43e7649eb/components/style/color/colors.less).
二货爱吃白萝卜
2 years ago
GitHub