Question

我目前正在使用Gatsby Link组件，样式化的组件库和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或样式化组件没有任何问题。我也尝试过直接将对象放置在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，

style属性接受具有camelCased属性而不是CSS字符串的JavaScript对象。这与DOM样式的JavaScript属性一致，效率更高，并且可以防止XSS安全漏洞。

例如，如果样式属性为border-bottom，则in react应为borderBottom；如果样式属性为border-top-left-radius，则in react应为{ {1}}，依此类推。

您应该使用此

borderTopLeftRadius

Answer 2

activeStyle属性似乎与react中的style属性相似。因此，您可以使用下面提到的语法来解决此问题

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

我还没有在盖茨比尝试过。但是我仍然相信它应该可以工作，因为它在反应中可以很好地工作。

只能将某些CSS属性与Gatsby activeStyles对象一起使用吗？

2 个答案: