Как заставить CSS-модули работать с Reactstrap cssModule propType? - PullRequest
Новая
       44

Как заставить CSS-модули работать с Reactstrap cssModule propType?

0 голосов
/ 10 октября 2018

Я заметил, что большинство элементов формы в документации Reactstrap имеют PropType cssModule.Я бы предположил, что это означает, что я мог бы переопределить стили Reactstrap по умолчанию и сделать что-то вроде этого:

Formtext.module.css 

.formtext {
  background-color: blue;
  border: 2px solid black;
  margin: 10px;
}

SimpleForm.jsx

import styles from "./Formtext.module.css";
...

<FormText cssModule={styles.formtext}>
   This is some placeholder help text...
</FormText>

`` `

Однако, похоже, это не работает.Проверяя мои инструменты реагирования, cssModule prop оценивает undefined.

Я использую Использование Reactstrap 5.0 и create-Reaction-app 1.1.5

Есть ли что-то, о чем я не знаючто мне нужно сделать?Нужно ли извлекать, чтобы иметь возможность использовать css-модули?Может кто-нибудь указать мне на пример того, как правильно использовать реквизит Ressstrap cssModule?

Для справки здесь приведено определение проптипов из документов Reactstrap 

FormText.propTypes = {
  children: PropTypes.node,
  inline: PropTypes.bool,
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), // default: 'small'
  color: PropTypes.string, // default: 'muted'
  className: PropTypes.string,
  cssModule: PropTypes.object,
};

1 Ответ

0 голосов
/ 24 ноября 2018

В cssModule

Похоже, что cssModules не ведут себя так, как вы думаете;реквизит не принимает ни одного, переопределяющего класса - он принимает отклоненный класс и замещающий класс.

Reactstrap использует mapToCssModules, чтобы сделать это.Смотрите документацию здесь .Обратите внимание на пример использования: 

<Example tag="div" cssModule={{ 'w-100': 'w-75' }} />

Таким образом, ваш случай будет выглядеть примерно так: 

<FormText cssModule={{ 'form-text' : styles.formtext }} />

Это полностью превзойдет 'form-text'хотя класс (который в вашем случае дает только display: block. Если вы хотите переопределить более избирательно, см. ниже.

Попробуйте вместо этого

В Исходный код FormText , похоже, вы можете выполнять переопределения другим способом:

  • Если вы хотите вообще исключить класс form-text, включите inline какprop,
  • Если вы хотите опустить любые классы начальной загрузки, связанные с цветом, установите для 'color' значение false (или что-то falsy),
  • установите для className propОбъект модуля CSS (styles.formtext).

<FormText className={styles.formText} color='' inline> Test formtext </FormText>

На самом деле наиболее важной частью здесь является className prop. Вы также можете переопределить стили, добавив tag prop (опять же, проверьте документы FormText).

Надеюсь, это было полезно! Счастливых праздников! ??

...