时间戳

首页 > 解决方案 > 为什么我不能对某些 React.Components 使用 className 属性？

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

问题描述

CSS 样式类在这里工作：

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

但是，这失败了（好吧，浏览器中没有样式更改）：

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

为什么 className 属性有时只起作用？

您应该如何向<Nav.Link>s 添加自定义样式，例如仅右对齐 Logoff 样式？

标签： reactjsreact-bootstrap

解决方案

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

例如，如果它是这样定义的（使用styled-components）：

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

它会起作用，因为所有道具都传递给div.

但是，如果它是这样定义的：

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

它会吞下去className。

通常，一个好的做法是将所有额外的道具传递到层次结构中，如下所示：

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

但我们永远不知道它是如何定义的。（您最好检查 中的定义node_modules。）

推荐阅读