css - 来自未应用于新组件的单独 CSS 文件的样式

Question

过去几天我一直在尝试使用 React 构建一个小元素，直到今天一切都很顺利。出于某种原因，没有 CSS 应用于新组件!之前工作的所有 CSS 仍在运行，但如果我在现有的 div 之间添加类似 div 的东西，新的 div 不会获取任何 CSS! 示例:

<div className="DivStyle"> // Styling applied!
  <div className="DivStyle"> </div> // Styling completely ignored!
<div>

可能值得一提的是，我仍然能够内联设置组件的样式。
另外，查看 Chrome 中的源，样式已上传!
这是我的具体示例:

import '../styles/drawers.css';

class BottomFilterDrawer extends React.Component<IBottomFilterDrawerProps, IBottomFilterDrawerState> {

    ...
    public render() {
        return(
            <Drawer
            open={this.state.isOpen}
            anchor="bottom"
            // tslint:disable-next-line jsx-no-lambda
            onClose={() => this.toggleDrawer(false)}>
              <div className="BottomDrawerContainer" style={{margin: "10px"}}> // Styling for "BottomDrawerContainer" class not applied! 
                ...
              </div>
            </Drawer>
        );
    }
}

CSS 文件:

#BottomDrawerContainer {
    margin: 10px;
}

我确信导入路径是正确的，否则 Typescript 甚至不会让我运行它。

Answer 1

您正在为类而非 id 应用 css。

因此您的 css 必须如下所示。

.BottomDrawerContainer {
   margin: 10px;
}

如果要申请inner div

.DivStyle .DivStyle {
  //style for inner div
 }