React 组件中的 Css 模块答案

【问题标题】：Css module in React componentReact 组件中的 Css 模块
【发布时间】：2021-12-30 03:24:36
【问题描述】：

拥有这个 css 模块：

mymodule.module.css：

ol li:not(:last-child)::after {
  color: red;
  margin: 1px;
}

反应组件：

import myStyles from './mymodule.module.css';
...

export const MyComponent: React.FunctionComponent<MyComponentProps> = ({...} => {
   
   ...

   return (
            <li className={myStyles}>
             ...
            </li>
   );

className字下面有一条红线，当悬停状态：

Type '{ readonly [key: string]: string; }' 不可分配给类型 'string'.ts(2322) index.d.ts(1749, 9)：预期类型来自此处在类型上声明的属性“className” 'DetailedHTMLProps'

有什么建议吗？

【问题讨论】：

可以像import './mymodule.module.css';一样导入CSS，然后你可以在className prop.中使用CSS中的类名。
在你的 CSS 中你没有任何 class。由于您为元素设置样式，没有类，也许您根本不需要使用 className 属性。
试试<li className={myStyles.['my-class']}>。给我们提供myStylesconsole.log

标签： css reactjs typescript css-modules react-css-modules

【解决方案1】：

您的 CSS 文件：

# Add your default tag styles
ol li:not(:last-child)::after {
  color: red;
  margin: 1px;
}

# Add your class
.my-class {
  margin: 1rem;
}

您的多伦多证券交易所

// import your stylesheet
import './mymodule.module.css';
...

export const MyComponent: React.FunctionComponent<MyComponentProps> =
 ({...}) => {
  ...
  // use the class as you would in HTML
  return (
   <li className="my-class">
    ...
   </li>
  );
}

【讨论】：

您添加了my-class，但没有添加ol 和li 的样式，在这种情况下，它们不会全局应用于项目中的所有有序列表和列表项吗？
我想找到一种仅在该类中应用这些样式的方法
li 样式将在您导入 CSS 后自动应用，无需类。如果您删除 className="my-class"，它将仅使用 CSS 中指定的任何内容作为默认样式。
你的样式只会应用在像<ol><li>...这样的标签中，所以在你ol元素所在的地方导入这个CSS，你不需要做任何事情......不需要使用className

【解决方案2】：

类名属性用于分配在你的css文件中定义的特定类，如果你想在li标签上应用css，你只需要在ts文件中导入css文件，或者如果你想给它一个带有类名的样式，你应该给它的父母一个像这样的类：

反应组件：

<ol className={myStyles.abc}
  <li>
    ...
  </li>
</ol>

mymodule.module.css：

.abc li:not(:last-child)::after {
  color: red;
  margin: 1px;
}

【讨论】：