WebStorm 無法自動完成樣式化組件

Question

我正在 WebStorm 中開發一個 React 項目，但由於我設置的結構而出現問題。

通常，WebStorm 支持樣式化組件，自動完成工作正常，但是訪問我從 ThemeProvider 提供的主題 object 的標准方法會導致一段非常臟的代碼。

為了獲得更清晰的代碼，我使用了另一種方法將 function 發送到樣式組件並從主題 object 中捕獲變量作為 arguments，但 WebStorm 不會這樣

我怎么解決這個問題？

Answer 1

您提供給 styled-component 的 function 應返回“css” object，您將從 styled-components 庫中導入命名為 import。

import styled, { css } from 'styled-components';

const Button = styled.button(({ theme, size, type }) => css`
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  background-color: ${theme.paper};
  color: ${theme.brand};
  font: ${theme.medium16};
  border-radius: 8px;
  border: solid 0.8px ${theme.brand};
  cursor: pointer;
`);