有这个 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”
有什么建议吗?
您的 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>
);
}
类名属性用于分配在 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;
}
本站系公益性非盈利分享网址,本文来自用户投稿,不代表边看边学立场,如若转载,请注明出处
评论列表(7条)