我在React中使用了一个组件。
import style from "../../Style/Styles.module.scss";
const Anchor = (props) => {
return <a className={style["anchorTags"]} href={props.href}>{props.title}</a>;
};
export default Anchor;
我已经在SCSS文件中为这个组件编写了CSS。
.anchorTags {
border: 2px solid $Very-Light-Gray;
color: $Very-Light-Gray;
}
但是当我在一个组件中编写内联css时,当在另一个组件上使用这个时,它不工作。
import style from "../../Style/Styles.module.scss";
import Anchor from "./achortag";
<Anchor
style={{ paddingBlock: "0.7em", paddingInline: "2em" }}
href="/viewPlan"
title="VIEW PLANS"
/>
请分享你的建议,这将如何运作?
2条答案
按热度按时间jtw3ybtb1#
在锚组件中:
或使用spread运算符,这将添加任何附加属性:
vs3odd8k2#
要使用所需样式,必须使用以下语法:
要了解更多信息,请阅读此(Adding a CSS Modules Stylesheet)。