Skip to content

Override Ant design vue components #106

@alexisponcet

Description

@alexisponcet

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions