css - 是否只允许某些 css 属性与 Gatsby activeStyles 对象一起使用？

Question

我目前正在使用 Gatsby Link 组件、Styled-Components Library 和 activeStyle 对象来设置事件导航链接的样式。

这是 Gatsby docs我在引用。

我遇到的问题是 background: "red" 或 border: "2px solid green" 等 css 属性有效，但是当我使用 border- bottom: 2px solid green 或 background-color: "red" 我得到一个错误。

SyntaxError: Unexpected token, expected "," (78:8)

76
77 const activeStyles = {
78   border-bottom: "2px solid orange",
           ^
79 };
80

我使用的是 Gatsby 2.7.1 和 Styled-components 4.2.0。到目前为止，我对 Gatsby 或 Styled-components 没有任何问题。我也尝试过将对象直接放在 Link 组件中，但出现了同样的问题。

<Link to="/" activeStyle={{ border-bottom: "2px solid orange"}}>
   Home
</Link>

我正在做这个

<StyledNavLink to="/" activeStyle={activeStyles}>
  Home
</StyledNavLink>

// Styled Component
const StyledNavLink = styled(props => <Link {...props} />)`
  font-size: 18px;
  width: 100%;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  padding: 0 24px;
`;

// Style Object passed to Gatsby Link Component
const activeStyles = {
  border-bottom: "2px solid orange", // Does not work
  border: "2px solid orange" // This does work
};

我希望使用所有 CSS 属性，但只能使用单个单词的 CSS 属性。

我认为这不是样式组件问题。

我错过了什么？

Answer 1

来自docs ,

The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes.

例如，如果样式属性是border-bottom 那么在 react 中应该是borderBottom 并且如果样式属性是border -top-left-radius 然后在 react 中它应该是 borderTopLeftRadius 等等。

你应该使用它，

const activeStyles = {
  borderBottom: "2px solid orange", // Now it will work
  border: "2px solid orange" // This does work
};