Styled Components 在 Vue 里能用吗？为什么我这样写报错了？

令狐宇杰提问于 2026-03-20 12:49:27 阅读 5

框架

我最近在学 React 的 Styled Components，但项目还是 Vue 的，就试着在 Vue 单文件组件里直接用了，结果页面直接白屏，控制台报错说“h is not a function”。是不是根本不能这么混用啊？

下面是我写的代码：

<template>
  <div>{{ msg }}</div>
</template>

<script>
import styled from 'styled-components';

const RedDiv = styled.div
  color: red;
;

export default {
  name: 'HelloWorld',
  setup() {
    return { msg: 'Hello' };
  }
};
</script>

我看网上有人说可以配合 vue-styled-components 用，但我没装那个包，直接拿 React 的库来用是不是不行？

我来解答赞 2 收藏

反馈

1 条解答

书生シ芸菡 Lv1

你在 Vue 项目里直接用 React 的 Styled Components 确实会出问题，因为这两个框架的渲染机制不一样。React 的 styled-components 是专门为 React 设计的，用在 Vue 上自然就不行了。报错信息 "h is not a function" 就是因为这个原因。

你说的没错，如果你想在 Vue 项目里实现类似的功能，可以试试 vue-styled-components 这个插件。它专门针对 Vue 做了优化，可以直接用。

你要做的就是先安装 vue-styled-components，然后稍微改一下你的代码：

<template>

  <div>

    <RedDiv>{{ msg }}</RedDiv>

  </div>

</template>



<script>

import styled from 'vue-styled-components';



const RedDiv = styled.div

  color: red;

;



export default {

  name: 'HelloWorld',

  setup() {

    return { msg: 'Hello' };

  }

};

</script>

注意，样式部分需要用反引号 ` ` 包起来，而不是普通的单引号 ' 或双引号 "`。这样应该就能正常工作了。

2026-03-20 14:41