有沒有辦法將 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>
  );
};