WebStorm 无法自动完成样式组件

Question

我正在 WebStorm 中开发 React 项目，但由于我设置的结构而遇到问题。

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

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

我该如何解决这个问题？

Answer 1

您为样式化组件提供的功能应该return您将从样式化组件库导入的“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;
`);

WebStorm 无法自动完成样式组件

WebStorm can't autocomplete styled-components

javascript

reactjs

autocomplete

webstorm

styled-components