使用styled-components的用法备忘

[waltcow]

1. overide antd component default style

import React from 'react';
import Button from 'antd/lib/button';
import styled from "styled-components";

const StyledButton = styled(Button)`
  color: palevioletred;
  font-weight: normal;
  :focus {
    color: palevioletred;
    border-color: palevioletred;
  }
  :hover {
    color: palevioletred;
    border-color: palevioletred;
  }
  &.ant-btn-clicked:after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    bottom: -1px;
    right: -1px;
    border-radius: inherit;
    border: 0 solid palevioletred;
    opacity: 0.4;
    -webkit-animation: buttonEffect 0.4s;
    animation: buttonEffect 0.4s;
    display: block;
  }
`;

2. show component displayname

typescript-plugin-styled-components is a plugin for TypeScript that gives you a nicer debugging experience

// 1. import default from the plugin module
const createStyledComponentsTransformer = require('typescript-plugin-styled-components').default;

// 2. create a transformer;
// the factory additionally accepts an options object which described below
const styledComponentsTransformer = createStyledComponentsTransformer({ displayName: true});

// 3. add getCustomTransformer method to the loader config
var config = {
    ...
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                options: {
                    ... // other loader's options
                    getCustomTransformers: () => ({ before: [styledComponentsTransformer] })
                }
            }
        ]
    }
    ...
};


interface Options {
    getDisplayName(filename: string, bindingName: string | undefined): string | undefined;
    identifiers: CustomStyledIdentifiers;
    ssr: boolean;
    displayName: boolean;
    minify: boolean;
}