избыточный стиль формы конфликтует с детским стилем - PullRequest
Новая
       20

избыточный стиль формы конфликтует с детским стилем

0 голосов
/ 26 октября 2019

Я использую lib с именем Uppy внутри избыточных форм, по какой-то причине конфликт в стиле избыточных форм с Uppy lib и пропуск представления.

просто представление представления будет выглядеть так

enter image description here

но результат, подобный этому

enter image description here

вот код песочницы ссылка https://codesandbox.io/s/redux-form-material-ui-example-m7lhy

соответствующая часть в форме редукса 

 <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

1 Ответ

1 голос
/ 26 октября 2019

Несмотря на то, что я смог переопределить CSS, я настоятельно рекомендовал бы отказаться от использования стольких библиотек (redux-form, react-toastify, reactstrap, material-ui, uppy и ck-editor, все они используютсвои собственные требуемые таблицы стилей!) в одном приложении, и вместо этого попытайтесь ограничить себя одной библиотекой стилей и создавая свои собственные пользовательские компоненты поверх нее. В противном случае вы будете тратить много времени на копание в DOM и переопределение слоев на слоях таблиц стилей библиотеки.

Тем не менее, вот фиксированный макет:

Edit Redux Form - Material UI Example

Что я добавил:

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