reactjs - 为什么我不能为某些 React.Components 使用 className 属性？

Question

CSS 样式类在这里工作:

<span className="cake">Cake</span>

但是，这失败了(好吧，浏览器中没有样式更改):

<Nav.Link href="/xyz" className="cake">Cake</Nav.Link>

为什么 className 属性只在某些时候起作用？

您应该如何将自定义样式添加到 <Nav.Link> s，例如右对齐注销一个？

Answer 1

浏览器是否选择该样式取决于 Nav.Link 的定义方式。

例如，如果它是这样定义的(使用styled-components):

const NavLink = styled.div`
  /* some styles */
`;

它会起作用，因为所有属性都传递给 div。

但是，如果这样定义:

const NavLink = ({ href, children }) => {
  return <a href={href}>children</a>;
};

它会吞下 className。

通常，一个好的做法是像这样将所有额外的 Prop 传递到层次结构中:

const NavLink = ({ href, children, ...rest }) => {
  return <a href={href} {...rest}>children</a>;
};

但我们永远不知道它是如何定义的。 (你最好检查 node_modules 中的定义。)