记录两个项目中遇到css相关的问题

[shuangmianxiaoQ]

参考：CSS Modules 详解及 React 中实践

Scss与JS变量共享时的报错

在Css Module中可以使用:export关键字将Scss中的变量导出到JS中使用，但是在TS中引入时会提示找不到引入的scss模块，具体解决方式如下：

导出Scss变量

$textColor: #333;
$primaryColor: #0F0;
$secondaryColor: #F0F;

// Here's the export you add.
:export {
  textColor: $textColor;
  primaryColor: $primaryColor;
  secondaryColor: $secondaryColor;
}

为对应的scss文件书写d.ts声明文件，如下所示：

export interface I_globalScss {
  primaryColor: string;
  accentColor: string;
  textColor: string;
}

export const styles: I_globalScss;

export default styles;

外部样式覆盖局部样式方法

因为Css Module默认都是局部样式，带了hash串，当使用外部样式覆盖内部样式时不能正常修改，因为内外样式的hash不同，改的不是同一个。可以借助data-role属性的选择器来查找并修改覆盖样式：

// dialog.js
return <div className={styles.root} data-role='dialog-root'>
      <a className={styles.disabledConfirm} data-role='dialog-confirm-btn'>Confirm</a>
      ...
  </div>

// dialog.css
[data-role="dialog-root"] {
  // override style
}