在单文件组件方法中使用 vue-styled-components

Question

这是我的样式组件文件 styles.js

import styled from 'vue-styled-components';

export const StyledTitle = styled.h1`
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
`;

export const Wrapper = styled.section`
    padding: 4em;
    background: papayawhip;
`;

然后在我的.vue单文件组件中

<template>
  <div class="m-15">
    <StyledTitle>SUBMIT YOUR DETAILS</StyledTitle>
  </div>
</template>

<script>

import { StyledTitle, Wrapper } from "./styles.js";

export default {
  name: "BuyNowCustomerDetails",
  props: {
    msg: String
  }
};
</script>

不工作！

错误

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Answer 1

您必须在导出语句中注册外部组件：

import { StyledTitle, Wrapper } from "./styles.js";

export default {
  name: "BuyNowCustomerDetails",
  props: {
    msg: String
  },
  //register components
  components: {
     StyledTitle
  }
};

在单文件组件方法中使用 vue-styled-components

Using vue-styled-components in Single file component approach

javascript

vue.js

styled-components