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

如果您想申请内部部门。

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

Answer 2

不要再次使用相同的ID，React会创建错误，如果先显示任何错误，请先解决错误，否则浏览器将不显示任何内容

来自单独的CSS文件的样式（不适用于新组件）

2 个答案: