WebStorm 无法自动完成样式化组件答案

【问题标题】：WebStorm can't autocomplete styled-componentsWebStorm 无法自动完成样式化组件
【发布时间】：2021-08-28 17:17:26
【问题描述】：

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

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

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

我该如何解决这个问题？

【问题讨论】：

您可能希望将相关代码添加到问题中，而不仅仅是代码图片

标签： javascript reactjs autocomplete webstorm styled-components

【解决方案1】：

您赋予样式组件的函数应返回“css”对象，您将从样式组件库中导入命名为 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;
`);

【讨论】：