Reactjs 可以使用mode.cssmode.scss引用常规的类名吗

发布于12月08日

这可能是一个愚蠢的问题，但我对在React中使用CSS/SCSS模块相对较新.

我有充分的理由这样问，因为模块允许作用域为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或内联样式)，但如果知道它是否可行就太好了.感谢您的关照，感谢您的帮助.

推荐答案

let see how we can override built-in components css个

假设您在global-style es.scss文件中有一个常规的css

.yourRegularClass {
  color: blue;
}

您可以使用:global Select 器来引用上面的全局类
定义您的本地App.mode.css，在这里，关键字composes用于从另一个组件的模块合成样式

:global {
  .yourRegularClass {
    font-weight: bold;
  }
}


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

通过导入本地App.module.css以上更新组件.这里CSS类dx-texteditor-input从devextreme-react被覆盖


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

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



function App () {
    // imagine a straightforward example,
    return (

      <div className={styles.myModuleClass}>This is a module class</div>

      <div className={`yourRegularClass ${styles.myModuleClass}`}>
        This uses both a global and a module class
      </div>

        <Textbox placeholder="Demo" className={styles.dxTexteditornput} />
    )
}