当我将这个组件导入另一个组件时，如何使用 className 修改按钮组件答案

【问题标题】：How do I modify a button component with className when I importing this component in another component当我将这个组件导入另一个组件时，如何使用 className 修改按钮组件
【发布时间】：2021-12-10 22:35:08
【问题描述】：

我正在尝试根据导入的每个页面修改按钮。我们来看看我的按钮组件。

import React from "react";
import "./Button.css";

export interface Props {
  marginLeft?: string;
  name?: string;
  backgroundColor?: string;
  color?: string;
  width?: string;
  onClick?: () => void;
  border?: string;
  fontWeight?: number;
  fontSize?: string;
  lineHeight?: string;
  marginBottom?: string;
  height?: string;
  display?: string;
  alignItems?: string;
}

export const Button: React.FC<Props> = ({
  name,
  backgroundColor,
  onClick,
  color,
  border,
  width,
  height,
  marginLeft,
  fontWeight,
  fontSize,
  lineHeight,
  marginBottom,
  display,
  alignItems,
}) => {
  return (
    <button
      className="myButton"
      style={{
        background: backgroundColor,
        color: color,
        border: border,
        width: width,
        marginLeft: marginLeft,
        fontWeight: fontWeight,
        fontSize: fontSize,
        lineHeight: lineHeight,
        marginBottom: marginBottom,
        height: height,
        alignItems: alignItems,
        display: display,
      }}
      onClick={onClick}
    >
      {name}
    </button>
  );
};
export default Button;

问题来自我的导师。他说我不应该这样做，比如通过 props 发送我的 css ......他建议我更改它并在我导入按钮的每个特定位置使用 className 并且我想更改某些内容。

在他建议我更改之前，我是这样做的。

        <Button
          backgroundColor="white"
          border="1px solid #595959"
          width="100%"
          name="Add a team member + "
          color="#595959"
          fontWeight={200}
          height="52px"
          marginBottom="25px"
        />
        <Button
          width="13%"
          name="Submit Project"
          border="none"
          color="#FFFFFF"
        />

而且我不知道如何在组件上编写 className。我的意思是我每次尝试做某事时都会出现一个错误，提示我无法做到。你能指导我应该怎么做吗？我会问我的导师他是不是那么可怕......他没有那么笑......你知道他是一个超过 8 年的编程人员。

【问题讨论】：

标签： javascript css reactjs typescript

【解决方案1】：

您可以为所需按钮的每个变体创建一个 css 类，然后像这样编写您的按钮组件：

const Button = ({class, name}) => {
  return (
    <button className={class}>{name}<button/>
  )
}

当你想使用按钮时

<Button class='class1' name="Button with class 1"/>

【讨论】：

【解决方案2】：

我们正在创建像公共组件一样的按钮来重用组件并减少代码重复，如果您从所有父组件（使用 Button）传递所有样式值和道具，那么公共组件没有优势或代码重用，因为您正在复制所有父组件中的所有内容。我应该建议为类似样式的按钮创建一些 CSS 类，假设您有 3 种类型的按钮

主要（具有蓝色背景和固定大小）
次要（将具有灰色背景和固定大小）
危险（将有红色背景和固定大小）

所以对于这些情况，在你的 CSS 文件中创建 3 个 CSS

.btn {
  //common styles for button
   width="100px"
   fontWeight={200}
   height="52px"
   marginBottom="25px"
}
.primary {
   backgroundColor="blue"
   border="1px solid #595959"
   color="white"
}
.secondary {
   backgroundColor="grey"
   color="red"
}
.danger {
   backgroundColor="red"
   color="green"
}

之后更改您的按钮组件，如

import React from "react";
import "./Button.css";

export interface Props {
  name?: string;
  onClick?: () => void;
  className?:string;
}

export const Button: React.FC<Props> = ({
  name,
  onClick,
  className
}) => {
  return (
    <button
      className={`btn ${className}`}
      onClick={onClick}
    >
      {name}
    </button>
  );
};
export default Button;

并且来自您的任何父组件

     <Button
          className="primary"
          name="Add a team member + "
        />
        <Button
          className="secondary"
          name="Submit Project"
        />

注意：这只是一个示例代码和类名，您可以根据需要使用类名和样式

【讨论】：