有没有办法将 SCSS 类注入到 React 组件中？

Question

我使用 TypeScript 在 React 中构建了一个简单的Panel.tsx组件：

import * as React from 'react';

import { Label, LabelType } from 'components/basic';

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

interface IPanel {
  title?: string;
  children: React.ReactNode;
}

const Panel = ({ title, children }: IPanel) => {
  return (
    <div className={styles.main}>
      {title && <Label type={LabelType.Title} bold text={title} />}
      {children}
    </div>
  );
};

export default Panel;

这是配套的Panel.module.scss文件：

.main {
  border: 2px solid $black;
  border-radius: 10px;
  padding: 10px;
}

现在，如果我想将 SCSS 类注入到Panel中，可能带有color 、 background-color 、 font-size等。有没有办法做到这一点？

Answer 1

是的，以接受className属性的方式编写组件是很常见的（但必须由组件作者明确地将其应用于组件根）。 例如， material-ui的所有组件都接受一个类名（我不是 material-ui 的忠实粉丝，但至少在这方面他们做得对）。

您可以将其显式添加到您的道具类型

interface IPanel {
  title?: string;
  children: React.ReactNode;
  className?: string;
}

...并在您的组件中使用它

import classnames from 'clsx'; // this is a popular package to combine classnames

const Panel = ({ title, children, className }: IPanel) => {
  return (
    <div className={classnames(styles.main, className)}>
      {title && <Label type={LabelType.Title} bold text={title} />}
      {children}
    </div>
  );
};

...或者您可以使用 React 中的一种实用程序类型。 例如，我经常只允许将所有常见的 HTML 属性和子属性添加为道具（是的，我知道，我的类型并不太精确）

import type { FunctionComponent, HTMLAttributes } from 'react';
export type CommonPropsFunctionComponent<TProps = {}> = FunctionComponent<
  TProps & HTMLAttributes<Element>
>;

import { CommonPropsFunctionComponent } from './types';

interface IPanel {
  title?: string;
}

const Panel: CommonPropsFunctionComponent<IPanel>  = ({ title, children, className }) => {
  return (
    <div className={classnames(styles.main, className)}>
      {title && <Label type={LabelType.Title} bold text={title} />}
      {children}
    </div>
  );
};

使用扩展运算符

您可能很想在这里使用它； 但请注意：您必须小心不要意外覆盖您自己的本地类名。 为了说明这一点，在这个例子中：

• 本地tabIndex可以被覆盖
• 本地类className列表不能被覆盖，只能扩展

const SomeComponent= ({ children, className, ...rest }) => {
  return (
    <div tabIndex={0} {...rest} className={classnames(styles.root, className)}>
      {children}
    </div>
  );
};