reactjs styled-component的css不适用于antd

wxclj1h5 于 2023-06-29 发布在 React

关注(0)|答案(2)|浏览(122)

1.我有一个用样式化组件编写的组件
1.在新的样式化组件中调用该组件
1.附加样式
结果：未应用样式

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
我想要的：TextArea的大小调整为无
但是我的styled-component被antd的css覆盖了

reactjs

来源：https://stackoverflow.com/questions/76553462/styled-components-css-is-not-applied-in-antd

2条答案

按热度按时间

91zkwejq1#

实际上，它确实适用于TextArea Antd组件。你可以在你的图片中看到它。由于CSS中的specificity，它已被默认样式的Antd覆盖。您可以使用!important来使其适用于任何特定情况：

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

赞(0）回复(0）举报 2023-06-29

toiithl62#

我已经解决了这个问题的css变量。

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>
    );
}

赞(0）回复(0）举报 2023-06-29

我来回答

reactjs styled-component的css不适用于antd

2条答案

相关问题

热门标签

最新问答