redux 表单样式与子样式冲突

Question

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

简单的视图显示是这样的

但是结果是这样的

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

redux 形式的相关部分

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

Uppy class

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 样式 class

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

redux 表单样式与子样式冲突

redux form style conflicts with children style

reactjs

redux-form

uppy