cssreactjsantd

Antd Drawer Style not being applied


I am a bit puzzled when following the documentation here. Everything seems to work other than the headerStyle attribute. It doesn't seem to be applying to styles that I apply to it. I'm not sure where I am going wrong.

Checking CodeSandbox from one of the examples provided headerStyle works. Where else can I check to understand what is causing this issue?

enter image description here

Localhost:

enter image description here

Codesandbox:

Edit modest-violet-12fum


Solution

  • Not sure where your problem lies, as I'm not getting the same warning (when using headerStyle), but here's a working example -- make sure to import the ant design css, otherwise, the ant components won't work as intended. Also, I find it easier and cleaner to override ant's css via overriding their respective class names in a separate css file, rather than overriding styles -- especially when overriding more than css property.

    Edit Ant Design Drawer Example


    index.js

    import React, { Component } from "react";
    import { render } from "react-dom";
    import { Drawer, Button } from "antd";
    import "antd/dist/antd.css";
    import "./index.css";
    
    class App extends Component {
      state = { visible: false };
    
      showDrawer = () => {
        this.setState(prevState => ({
          visible: !prevState.visible
        }));
      };
    
      render() {
        return (
          <div>
            <Button type="primary" onClick={this.showDrawer}>
              Open
            </Button>
            <Drawer
              title="Basic Drawer"
              placement="right"
              closable={false}
              onClose={this.showDrawer}
              visible={this.state.visible}
            >
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
            </Drawer>
          </div>
        );
      }
    }
    
    render(<App />, document.getElementById("container"));
    

    index.css

    .ant-drawer-header {
      background-color: #5340ff;
      border-radius: 0;
    }
    
    .ant-drawer-title {
      color: #fff;
    }
    
    .ant-drawer-body {
      background-color: #5340ff;
      color: #fff;
      height: calc(100vh - 55px);
    }