WebStorm 无法自动完成样式组件

Question

我正在 WebStorm 中开发一个 React 项目，但由于我设置的结构出现问题。

通常，WebStorm 支持样式化组件，自动完成工作正常，但访问我从 ThemeProvider 提供的主题对象的标准方法会导致一段非常脏的代码。

为了获得更简洁的代码，我使用了另一种方式将函数发送到样式组件并从主题对象中捕获变量作为参数，但这样 WebStorm 不会自动完成。

我该如何解决这个问题？

Answer 1

您提供给样式组件的函数应该返回您将从样式组件库中导入的名为 import 的“css”对象。

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;
`);