未应用辅助抽屉样式

Question

遵循文档here时，我有些困惑。除了headerStyle属性之外，其他所有功能似乎都可以正常工作。它似乎不适用于我适用的样式。我不确定我要去哪里哪里。

从提供的headerStyle示例之一中检查CodeSandbox。我还可以在哪里查看导致此问题的原因？

本地主机：

Codesandbox：

Answer 1

[不确定您的问题所在，因为我没有收到相同的警告，但这是一个有效的示例（请确保导入ant design css，否则，ant组件将无法正常工作）。另外，我发现通过覆盖一个单独的CSS文件中它们各自的类名来覆盖ant的CSS更容易和更清洁。

---

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