Question 194231 in CSS Question posted in
Some basic documentation can be found here.

styled-component's css is not applied in antd

  1. I have a component that is written with styled-components

  2. Calling that component inside of new Styled component

  3. Attach styles

Result: Styles are not applied

import {Button, Form, Input} from "antd";
import styled from "styled-components";

const {TextArea} = Input;

const Container = styled.div`
    width: 768px;
`;

const StyledTextArea = styled(TextArea)`
    resize: none;
`;

const StyledFormItem = styled(Form.Item)`
    text-align: right;
`;

export default function ComentWriter() {
    return (
        <Container>
            <Form layout="vertical">
                <Form.Item
                    name="comment">
                    <StyledTextArea rows={3} />
                </Form.Item>
                <StyledFormItem>
                    <Button type="primary" htmlType="submit">
                        Wirte Comment
                    </Button>
                </StyledFormItem>
            </Form>
        </Container>
    );
}

Result in Web Browser

Devloper Tool

What I want: TextArea’s resize is none

but my styled-component is overrided by antd’s css.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    i have solved this problem to css variable.

    export default function ComentWriter() {
    const textAreaStyle: CSSProperties = useMemo(() => ({
        resize: "none",
    }), []);

    return (
        <Container>
            <Form>
                <Form.Item
                    name="comment">
                    <TextArea rows={3} style={textAreaStyle} />
                </Form.Item>
                <StyledFormItem>
                    <Button type="primary" htmlType="submit">
                        Wirte Comment
                    </Button>
                </StyledFormItem>
            </Form>
        </Container>
    );
}

  2. 0

    Actually, it does apply to the TextArea Antd component. You can see it in your picture resize:none. Due to the specificity in CSS, it has been overridden by the default styling of Antd. You can use !important to make it apply regardless of specificity:

    const StyledTextArea = styled(TextArea)`
    resize: none !important;
`;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search