React自定义组件中内联CSS不生效，求解决方法

你的自定义Anchor组件没有接收并传递style属性给内部的<a>元素，导致外部传入的内联样式无法作用到实际DOM节点上，修改组件代码即可解决：

修改后的Anchor组件代码 #

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

const Anchor = (props) => {
  return (
    <a 
      className={style["anchorTags"]} 
      href={props.href} 
      style={props.style}  // 传递外部传入的内联样式
    >
      {props.title}
    </a>
  );
};

export default Anchor;

也可以用解构赋值让代码更简洁：

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

const Anchor = ({ href, title, style: inlineStyle }) => {
  return (
    <a 
      className={style["anchorTags"]} 
      href={href} 
      style={inlineStyle}
    >
      {title}
    </a>
  );
};

export default Anchor;

修改后，外部传入的style属性会被直接应用到<a>标签上，内联样式即可正常生效。如果SCSS中的样式和内联样式存在属性冲突，内联样式优先级更高，会覆盖SCSS中的对应属性。

内容的提问来源于stack exchange，提问作者Vineet Kujur