redux表单样式与子样式冲突

Question

我在redux表单中使用称为Uppy的lib，由于某种原因，redux表单与Uppy lib发生样式冲突，并错过了视图。

简单来说就是这样显示

但是这样的结果

这里是代码沙箱链接https://codesandbox.io/s/redux-form-material-ui-example-m7lhy

redux形式的相关部分

 <Grid item>
          <UppySample />
        </Grid>

Uppy类

class UppySample extends React.Component {
  constructor(props) {
    super(props);

    this.uppy = new Uppy({ id: "uppy1", autoProceed: false, debug: true }).use(
      Tus,
      { endpoint: "https://master.tus.io/files/" }
    );
  }

  componentWillUnmount() {
    this.uppy.close();
  }

  render() {
    return (
      <React.Fragment>
        <h2>Drag Drop Area</h2>

        <Dashboard
          uppy={this.uppy}
          metaFields={[{ id: "name", name: "Name", placeholder: "File name" }]}
        />
      </React.Fragment>
    );
  }
}
export default UppySample;

我需要为uppySample类禁用redux样式

Answer 1

虽然我能够覆盖CSS，但我强烈建议不要使用太多库（redux-form，react-toastify，reactstrap，material-ui，uppy和ck-editor都使用它们拥有一个必需的样式表！），而是尝试将自己限制在一个样式库中，并在该样式库上构建自己的自定义组件。否则，您将花费很多的时间来挖掘DOM，并在库样式表的各个层之上进行覆盖。

也就是说，这是固定的布局：

我添加的内容：

index.css

form ul li > div > div > * {
  padding: 0;
  border: 0;
  text-align: left;
}

form ul li:first-child button:before {
  display: none;
}

form > div button[type="button"],
form ul li > div button[type="button"] {
  display: inline-block;
  border-radius: 0;
  padding: 0;
  font-size: 16px;
  color: #fff;
  background-image: none;
  border: 0;
  color: #000;
}

form > div button[type="button"]:hover,
form > div button[type="button"]:focus,
form ul li > div button[type="button"]:hover,
form ul li > div button[type="button"]:focus {
  background-image: none;
  border: 0;
}

UppySample.css

.uppy-DashboardItem-actionWrapper {
  flex-direction: row;
}