Разрешено ли использовать только некоторые свойства css с объектами Gatsby activeStyles?

Question

В настоящее время я оформляю активные навигационные ссылки, используя компоненты Gatsby Link, библиотеку Styled-Components и объект activeStyle.

Здесь Gatsby 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

Я использую Gatsby2.7.1 и Styled-компоненты 4.2.0.До этого момента у меня не было проблем с Gatsby или Styled-компонентами.Я попытался поместить объект непосредственно в компонент 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

Из документов ,

Атрибут style принимает объект JavaScript со свойствами camelCased вместо строки CSS.Это согласуется со свойством JavaScript в стиле DOM, является более эффективным и предотвращает дыры в безопасности XSS.

Например, , если атрибутом стиля является border-bottom, то при реагировании следуетбыть borderBottom и если атрибут style border-top-left-radius, то в реакции он должен быть borderTopLeftRadius и т. д.

Вы должны использовать это,

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

Answer 2

Свойство activeStyle похоже на свойство style в реагировать.Таким образом, вы можете использовать синтаксис, упомянутый ниже, чтобы решить это

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

Я не пробовал это в Гэтсби.Но все же я верю, что это должно работать, так как оно отлично работает в реакции.