将外部自定义 css 应用于 reactstrap 输入

Question

我在将来自外部 css 模块的自定义 css 应用到来自 Reactstrap 的输入时遇到问题。 所以我有以下代码：

<Input
            className={'border-0 p-0'}
            style={{
              width: '150px',
              height: '100px',
              fontSize: '18px',
              overflow: 'hidden',
              resize: 'none',
              backgroundColor: 'ffffff',
              boxShadow: 'none',
              marginTop: '-10px',
              marginBottom: '10px'
            }}
           innerRef={register}
            type={'textarea'}
            readOnly
          />

现在可以使用内联样式，但是属性太多，我想将它们放在 scss 外部模块中，但它不起作用。 我试过style={styles.customCss} 但它不起作用，我的自定义样式没有应用。我也尝试过输入className={'border-0 p-0' && styles.customCss}，但仍然无法正常工作。 有什么想法吗？

在我的 Css 外部文件中

.customCss {
  width: '150px';
  height: '100px';
  font-size: '18px';
  overflow: 'hidden';
  resize: 'none';
  background-color: 'ffffff';
  box-shadow: 'none';
  margin-top: '-10px';
  margin-bottom: '10px'
}

在我的组件中我有

import React from 'react';
import { useForm } from 'react-hook-form';
import {
  Container,
  Row,
  Col,
  Label,
  Input,
  Button,
  FormText
} from 'reactstrap';
import classnames from 'classnames/bind';

import styles from './styles.module.scss';

const cx = classnames.bind(styles);

const customComponent = props => {
  const { register, handleSubmit } = useForm();

  return (
    <div className={styles.container}>
      <div className={styles.heading}>
        <span className={styles.label}>
          {heading}
        </span>
      </div>
      <form>
        <Col className={'p-0'}>
          <Input
            className={cx(styles.customCss, 'border-0 p-0')}
            id="customer"
            name="customer"
            defaultValue={lot}
            innerRef={register}
            type={'textarea'}
            readOnly
          />
        </Col>
      </form>
    </div>
  );
};

export default customComponent;

Answer 1

我假设您在导入样式时正在使用 CSS 模块，即您的文件顶部有一个 import styles from './styles.module.scss'。

styles.customCss 将包含实际的 CSS 类名称，而不是完整的样式对象本身。因此，解决您使用style={styles.customCss} 的尝试，这是行不通的。请参阅 CRA 的 page on CSS modules。

现在，对于您使用 className={'border-0 p-0' && styles.customCss} 的其他尝试，我知道您正在尝试将自定义 CSS 和 Bootstrap 类中的类名连接起来。代码实际上做的是对'border-0 p-0' && styles.customCss 执行短路评估，它只会评估为styles.customCss。对于在 className 属性中组合 CSS 类，通常像 clsx 这样的库会很有帮助。

更新

看起来您的 CSS 文件有误。您正在使用 CSS，即这些值没有引号。这意味着，您的样式将是这样的：

.customCss {
  width: 150px;
  height: 100px;
  font-size: 18px;
  overflow: hidden;
  resize: none;
  background-color: #ffffff;
  box-shadow: none;
  margin-top: -10px;
  margin-bottom: 10px;
}

sandbox demo 中的工作示例