vue-styled-components icon indicating copy to clipboard operation
vue-styled-components copied to clipboard

Override Ant design vue components

Open alexisponcet opened this issue 5 years ago • 0 comments
trafficstars

Hey. I would like to know if it is possible to override external library's styles such as ant design vue. I tried this code :

<script lang="ts">
    import { Layout } from 'ant-design-vue';  
    import { Component, Vue } from 'vue-property-decorator';  
    import styled from 'vue-styled-components';  
    const { Header } = Layout;  

    const WhiteHeader = styled(Header)`
        background-color: white  
    ;`

    @Component({ 
        components: { WhiteHeader }
    })
    export default class TestHeader extends Vue {}
</script>

<template>
    <a-layout>
        <white-header>header</white-header>
    </a-layout>
</template>

However, the ant design header style is not taken.. I know that works with react, styled-components and antd. How can I manage to pass that code. Any idea?

alexisponcet avatar Mar 21 '20 07:03 alexisponcet