是否可以使用 module.css/module.scss 引用常规类名？

Question

这可能是一个愚蠢的问题，但我对使用

CSS

/

SCSS

模块和

React

还比较陌生。

而且我有充分的理由提出这个问题，因为模块允许确定

CSS

的范围（这对于防止

CSS

冲突很有用），但通常在使用外部库（如

Material-UI

或

devextreme

）作为内置组件时，需要覆盖给定的

CSS

。

例如（我将使用

devextreme

来更好地说明）：

// ...other imports
import Textbox from 'devextreme-react/text-box';

const nameLabel = {'aria-label': 'Demo'}

function App () {
    // imagine a straightforward example,
    return (
        <Textbox placeholder="Demo" inputAttr={nameLabel} />
    )
}

通常，如果我不想要填充，可以像下面那样做：

.dx-texteditor.dx-editor-filled .dx-texteditor-input {
    padding: 0;
}

肯定还有其他方法（例如设置

id

或内联样式），但很高兴知道这是否可行。感谢您的关注和所有帮助。

Answer 1

让我们看看如何覆盖内置组件CSS

• 定义本地App.module.css，这里的

  composes

  关键字用于从另一个组件的模块组合样式

.myModuleClass {
  color: red;
  
  .dxTexteditornput {
    composes: dxTexteditornput from '~path-to/DevextremeComponent/module.scss';
   padding: 0;
  }
}

• 通过导入上面的本地

  App.module.css

  来更新组件。这里 devextreme-react 的 css 类 dx-texteditor-input 已被覆盖

import Textbox from 'devextreme-react/text-box';

import styles from './App.module.css';



function App () {
    // imagine a straightforward example,
    return (
        <Textbox placeholder="Demo" className={styles.dxTexteditornput} />
    )
}