Skip to main content

How to add css

widget-cli has built-in style-loader and css-loader, and supports esModule to import css.

Here is an example​

In the widget development directory


├── src
│   ├── index.css
│   ├── index.tsx

index.css

  .redColor {
    color: red;
  }

index.tsx

esModule​

  import React from 'react';
  import style from './index.css';

  export const Example: React.FC = () => {
    return <div className={style.redColor}>a red div</div>
  }

External css​

Note: It is only supported when the sandbox environment is enabled

  import './index.css';

  export const Example: React.FC = () => {
    return <div className='redColor'>a red div</div>
  }

To use a third-party UI component library​

If you need to use a third-party UI component library, we currently recommend using MUI.