reactjs 为什么内联CSS在react中对组件不起作用？

jmp7cifd 于 2023-02-08 发布在 React

关注(0)|答案(2)|浏览(164)

我在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"
        />

请分享你的建议，这将如何运作？

reactjs

来源：https://stackoverflow.com/questions/75360709/why-inline-css-is-not-working-on-component-in-react

2条答案

按热度按时间

jtw3ybtb1#

在锚组件中：

const Anchor = (props) => {
  return (
    <a className={style.anchorTags} href="#" style={props.style}>
      {props.title}
    </a>
  );
};

export default Anchor;

或使用spread运算符，这将添加任何附加属性：

const Anchor = (props) => {
  return (
    <a className={style.anchorTags} href="#" {...props}>
      {props.title}
    </a>
  );
};

export default Anchor;

赞(0）回复(0）举报 2023-02-08

vs3odd8k2#

要使用所需样式，必须使用以下语法：

import style from "../../Style/Styles.module.scss";

const Anchor = (props) => (
  <a className={style.anchorTags} href={props.href} {...props}>{props.title}</a>;
);

export default Anchor;

要了解更多信息，请阅读此（Adding a CSS Modules Stylesheet）。

赞(0）回复(0）举报 2023-02-08

我来回答

reactjs 为什么内联CSS在react中对组件不起作用？

2条答案

相关问题

热门标签

最新问答