reactjs - redux 表单样式与子样式冲突

Question

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

只是视图显示是这样的

但是这样的结果

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

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 类禁用 redux 样式

标签： reactjsredux-formuppy

Answer 1

虽然我能够覆盖 CSS，但我强烈建议不要在单个应用程序中使用这么多库（redux-form、react-toastify、reactstrap、material-ui，uppy并且ck-editor都使用自己需要的样式表！），而是尝试将自己限制在一个样式库中并在其上构建您自己的自定义组件。否则，您将花费大量时间挖掘 DOM 并覆盖层层库样式表。

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

我添加的内容：

索引.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;
}