Css组件:React组件中的 Css模块

有这个 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 单词下有一条红线,当悬停时:

类型“{readonly [key:string]:string;}”不可赋给类型“string”。ts (2322) index.d.ts (1749,9):预期的类型来自此处在类型“DetailedHTMLProps & lt;LiHTMLAttributes,HTMLLIElement & gt;”上声明的属性“className”

有什么建议吗?

0

您的 CSS 文件:

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

您的 TSX

// 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>
  );
}
0

类名属性用于分配在 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;
}

本站系公益性非盈利分享网址,本文来自用户投稿,不代表边看边学立场,如若转载,请注明出处

(828)
资深web前端:后端Web开发vs前端 Web开发的未来
上一篇
开发人员笔记本配置(best developer laptops)
下一篇

相关推荐

  • javascript判断题:JavaScript中的函数是如何定义的?

    示例示例判断题是指使用语言来实现一些逻辑判断的题目,主要是使用if语句来实现。例如:…

    2023-06-28 15:27:44
    0 39 36
  • css动画执行一次:Unlock Your Potential with CSS Animations

    CSS动画可以使元素在指定的时间内从一种样式变化到另一种样式。要实现CSS动画只执行一次,需要使用animation-iteration-count属性,该属性可以设置动画的重复次数。…

    2023-05-02 02:07:41
    0 93 37
  • javascript折叠菜单:使用方法

    javascript折叠菜单是指使用javascript实现的折叠菜单,它可以实现菜单的展开和折叠功能,以更好的帮助用户浏览网页。…

    2023-08-06 16:28:04
    0 20 40
  • javascript是java语言吗:JavaScript与Java之间的区别

    示例示例No,不是java语言。和Java是两种完全不同的编程语言,它们之间没有直接的联系。是一种轻量级的、跨平台的、弱类型的、基于原型的、多范式的编程语言,它的设计目的是为了使网页上的动态内容更容易创建和维护。…

    2023-05-17 04:31:38
    0 16 92
  • jquery 改变css: blue});

    示例示例jQuery 可以使用 css() 方法来改变 CSS 属性,其语法如下:$().css(, value);…

    2023-04-30 02:29:44
    0 27 56
  • css起源下载:Unlock the Power of CSS to Create Amazing Web Designs

    CSS(Cascading Style Sheets)是一种用来定义HTML文档的样式表语言。它可以让你使用样式属性来定义文档的外观,如字体、颜色、背景图像等。…

    2023-03-04 03:20:22
    0 68 74
  • javascript定义The Language of the Web

    示例示例是一种轻量级的脚本语言,它可以在浏览器中运行,用于添加动态效果到网页,以及创建更复杂的Web应用程序。下面是一个简单的代码示例,用于显示一个弹出框:…

    2023-04-07 12:46:01
    0 95 52
  • javascript警告框请注意您的输入!

    javascript警告框是一种浏览器弹出框,用于向用户显示一条警告信息。它可以帮助用户在网页中做出正确的选择,以避免出现不必要的错误。…

    2023-10-02 07:40:28
    0 34 16

发表评论

登录 后才能评论

评论列表(67条)