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

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

Formtext.module.css

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

Простая форма.jsx

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

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

```

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

Я использую Использование Reactstrap 5.0 и приложение create-реагировать 1.1.5.

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

Для справки здесь приведено определение proptypes из документов 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,
};

reactjs react-css-modules reactstrap
person rakitin    schedule 10.10.2018    source источник

Ответы (2)


arrow_upward
3
arrow_downward

На 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 в качестве реквизита,
  • Если вы хотите опустить какие-либо классы начальной загрузки, связанные с цветом, установите для параметра «цвет» значение false (или что-то вроде falsy),
  • установите свойство className для вашего объекта модуля CSS (styles.formtext).

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

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

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

person Walker    schedule 24.11.2018

arrow_upward
1
arrow_downward

На самом деле я не получил принятого ответа, но недавно у меня была такая же проблема, и, на мой взгляд, cssModule ведет себя именно так, как и следовало ожидать. Вы просто передаете импортированный объект модуля, а затем указываете классы, на которые они будут ссылаться в модуле.

Вот мой пример (из приложения create-react-app), как я исправил Navbar, чтобы получить стили начальной загрузки из моего модуля начальной загрузки (поскольку я не импортирую начальную загрузку глобально):

import cx from 'classnames';
import bootstrap from 'bootstrap/dist/css/bootstrap.css';
import navbar from './navbar.css';

let styles = Object.assign({}, bootstrap, navbar);

public render() {
    return (<Navbar cssModule={styles} className={cx(styles.navbarExpandSm, styles.navbarToggleableSm, styles.borderBottom, styles.boxShadow, styles.mb3)} light>[your menu here]</Navbar>);
}

Это просто говорит элементу управления взять модуль стилей и сослаться на все имена классов, переданные в classNames. Если вы посмотрите на метод mapToCssModules, то увидите, что он именно это и делает. https://github.com/reactstrap/reactstrap/blob/d3cd4ea79dcaf478af5984f760ff1290406f62a5/src/utils.js#L53

В моем случае это позволяет элементу управления подобрать исходные стили начальной загрузки, и я могу переопределить то, что мне нужно, в моем собственном модуле.

person Vočko    schedule 25.06.2020