Reactjs redux表单样式与子样式冲突

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

简单地说，视图应该是这样的

但结果是这样的

下面是代码沙盒链接

以redux形式显示相关部分

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

上流社会

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扩展了React.Component{
建造师（道具）{
超级（道具）；
this.uppy=newuppy（{id:“uppy1”，autoProceed:false，debug:true}）(
土族，
{端点：https://master.tus.io/files/" }
);
}
组件将卸载（）{
this.uppy.close（）；
}
render（）{
返回(
拖放区
);
}
}
导出默认UppySample；

---

我需要禁用uppySample类的redux样式

虽然我能够覆盖CSS，但我强烈建议不要使用这么多库（

redux表单

，

react to astify

，

reactstrap

，

材质界面

，

uppy

和

ck编辑器

都使用自己需要的样式表！）在单个应用程序中，而是尝试将自己限制在一个样式库中，并在其上构建自己的自定义组件。否则，您将花费大量时间在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;
}

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

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

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