redux form style conflicts with children style

Question

I am using lib called Uppy inside redux forms, for some reason redux forms style conflict with Uppy lib and miss up the view .

simply the view show be like this

but the result like this

here is code sandbox link https://codesandbox.io/s/redux-form-material-ui-example-m7lhy

the relevant part in redux form

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

I need to disable redux style for uppySample class

Answer 1

While I was able to override the CSS, I'd highly recommend moving away from using so many libraries (redux-form, react-toastify, reactstrap, material-ui, uppy and ck-editor all use their own required stylesheets!) within a single application, and instead attempt to limit yourself to one style library and building your own custom components on top of it. Otherwise, you're going to be spending a lot of time digging through the DOM and overriding layers upon layers of library stylesheets.

That said, here's a fixed layout:

What I added:

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