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 clName={myStyles}>
             ...
            </li>
   );

在 clName 单词下有一条红线,当悬停时:

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

有什么建议吗?

0

您的 CSS 文件:

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

您的 TSX

// import your stylesheet
import './mymodule.module.css';
...
export const MyComponent: React.FunctionComponent<MyComponentProps> =
 ({...}) => {
  ...
  // use the cl as you would in HTML
  return (
   <li clName="my-cl">
    ...
   </li>
  );
}
0

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

反应组件:

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

mymodule.module.css:

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

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

(329)
Python绘制八边形代码:Javascript画布绘制一个八边形
上一篇
Total amount:分摊金额总计(square up payment methods)
下一篇

相关推荐

  • css3参考手册:CSS3 Reference Guide

    CSS3参考手册是一个指导开发者使用CSS3的参考文档,其中包含了CSS3中所有属性、值、选择器、伪类、伪元素、函数和@规则的详细描述。它还提供了一些示例代码,以帮助开发者更好地理解CSS3的用法。…

    2023-02-24 11:30:09
    0 36 16
  • css背景图片:Unlock the Power of Creative Backgrounds

    示例示例CSS背景图片是一种使用CSS样式来定义HTML元素的背景图像。它可以让你在网页中添加图片,而不需要使用标签。CSS背景图片的语法如下:…

    2023-03-15 12:43:56
    0 35 98
  • css otf字体:Hello World

    OTF(OpenType Font)字体是一种新的多功能字体格式,它可以包含更多的字形特性,比如脚本字体、多个拉丁文字母表、更多的语言支持和更多的图形。…

    2023-02-04 04:59:25
    0 69 55
  • css 圆环:Achieve Perfection with a Stylish Circular Design

    CSS 圆环是利用 CSS 的 border-radius 属性来实现的,可以设置元素的四个边框半径,使元素形成圆形或椭圆形,从而实现圆环效果。…

    2023-01-25 16:01:39
    0 43 10
  • css 边框样式:**探索未知的世界**

    CSS 边框样式是用来定义 HTML 元素边框的样式。可以使用 border 属性来定义边框样式,该属性可以接受一个或多个值,其中包括边框宽度、边框样式和边框颜色。…

    2023-02-01 14:01:45
    0 53 35
  • html外部链接css代码:Welcome to My Website

    HTML外部链接CSS代码是一种将CSS代码与HTML文档分离的方法,它使用标签将CSS文件链接到HTML文档中。这样可以使HTML文档更加简洁,同时可以让多个HTML文档共享一个CSS文件,减少重复代码。…

    2023-03-04 03:35:49
    0 22 38
  • css里四种不同的定义分别为:### 利用CSS实现多样化的视觉效果

    示例示例内联样式(Inline Style):内联样式是在HTML元素中直接使用style属性定义样式的方法,它可以对单一的HTML元素进行定制。示例:…

    2023-02-16 07:29:55
    0 25 21
  • css设置背景图片位置:Welcome to my Website

    CSS设置背景图片位置,可以使用-属性,例如:上面的代码表示将背景图片定位到div元素的左上角。…

    2023-02-26 15:04:48
    0 95 70

发表评论

登录 后才能评论

评论列表(52条)