css - 为什么 css 样式不适用于模式？

Question

出于某种原因，css 样式不适用于 React Modal。有什么理由吗？

render() {
    return (
      <div>
        <Modal defaultOpen={this.props.isShowing} className="openmodal">
        </Modal>
      </div>
    );
}

CSS 文件

.openmodal{
  text-align: center;
  background-color: black;
  border-radius: 0;
  width: 400px;
  position: relative;
}

Answer 1

如果你想使用 javascript 样式，你可以像这样应用它；

const openmodal = {
  content: {
    textAlign: 'center',
    backgroundColor: 'black',
    borderRadius: '0',
    width: '400px',
    position: 'relative'
  }
}

render() {
    return (
      <div>
        <Modal defaultOpen={this.props.isShowing} style={openmodal}>
        </Modal>
      </div>
    );
}

尝试使用内联样式。