在另一个组件中导入此组件时，如何使用 className 修改按钮组件

Question

I'm trying to modify a button depending on every page where is imported. Let's take a look at my button component.

 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;

The problem is coming from my mentor. He said that I should not do this like sending through props my css... and he suggested me to change it and to use a className on every specific place where I import my button and I wanted to change something.

Here is how I did it until he suggested me to change it.

 <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" />

and I don't know exactly how I can write className on a component. I mean I get every time when I'm trying to do something a error that is suggesting me it can not be possible to do it. Can you guide me on how I should do it? I would asked my mentor if he was not that scary ... he doesn't smile that much ... you know he's a programming for over 8 yaers.

Answer 1

You could just create a css class for every variation of the button you want, and then write your button component like this:

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

and when you want to use the Button

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

Answer 2

We are creating button like common components to reuse the component and reduce the code repetition, if you are passing all the style values and props from all parent components(where Button is used) then there is no advantage of the common component or code reuse because you are duplicating everything in all the parent components. what should I suggest is create some CSS classes for similar style buttons, Let say you have 3 types of buttons

1. primary (will have a blue background and fixed sizes)
2. secondary (Will have a grey background and fixed sizes)
3. danger (Will have a red background and fixed sizes)

So for these cases create 3 CSS in your CSS file

.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"
}

after this change your button component like

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;

And from your any parent component

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

Note: This is just a sample code and classNames, you can use the class names and styles as you needed