Antd Drawer Style not being applied

Question

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?

Localhost:

Codesandbox:

Answer 1

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.

---

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