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

Question

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

这里是盖茨比 docs 我正在引用。

我遇到的问题是 css 属性（例如 background: "red" 或 border: "2px solid green" 有效，但是当我使用 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

activeStyle 属性似乎与 react 中的样式属性相似。所以你可以使用下面提到的语法来解决这个

activeStyle={{ color: "red" ; "background":"blue" }}

我还没有在 gatsby 中尝试过这个。但我仍然相信它应该能正常工作，因为它在反应中工作得很好。

Answer 2

来自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那么在反应中应该是borderBottom并且如果样式属性是border-top-left-radius那么在反应应该是 borderTopLeftRadius 等等。

你应该用这个，

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

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

Are only some css properties allowed to be used with Gatsby activeStyles objects?

css

reactjs

gatsby

styled-components