React 按钮组件自定义类名

Question

我有一个像这样的 React 按钮组件

// src/components/Button.jsx
import PropTypes from 'prop-types';
import styles from './Button.module.css';
import classNames from 'classnames';


const Button = ({
    onClick,
    children,
    type = 'button',
    variant = 'primary',
    disabled = false,
    customWidth,
    customHeight,          // New prop for custom width
    customBgColor,         // New prop for custom background color
    customTextColor,       // New prop for custom text color
    customBorderRadius,     // New prop for custom border radius
    className  // New prop for additional class


}) => {
    // const buttonClass = `${styles.button} ${styles[variant]} ${className}`; // Add the custom class
    const buttonClass = classNames(styles.button, styles[variant], className); // Combine internal and custom classes


    // const buttonClass = `${styles.button} ${styles[variant]}`;
    // Set the background color based on the disabled state
    const backgroundColor = disabled ? "#cccccc" : customBgColor || ''; // Default background color when not disabled

    // Inline styles for customization
    const style = {
        width: customWidth || '100%',  // Default to 100% if no width is provided
        height: customHeight || '',
        backgroundColor,
        color: customTextColor || '',  // Use provided text color or default to empty
        borderRadius: customBorderRadius || '5px', // Use provided border radius or default
    };

    return (
        <button
            type={type}
            className={buttonClass}
            onClick={onClick}
            disabled={disabled}
            style={style} // Apply custom styles here
        >
            {children}
        </button>
    );
};

// Add PropTypes validation
Button.propTypes = {
    onClick: PropTypes.func,
    children: PropTypes.node.isRequired,
    type: PropTypes.string,
    variant: PropTypes.string,
    disabled: PropTypes.bool,
    customWidth: PropTypes.string,        // New prop for custom width
    customHeight: PropTypes.string,
    customBgColor: PropTypes.string,      // New prop for custom background color
    customTextColor: PropTypes.string,    // New prop for custom text color
    customBorderRadius: PropTypes.string, // New prop for custom border radius
    className: PropTypes.string, // New prop for additional class

};



export default Button;

App.jsx 文件中的这个 Button 组件就是这样使用的

< Header >
          <FalshyContainer>
            <Username username={username} />
            {!isQuestionPageVisible && (
              <Button
                className={styles.customButton} // Apply the custom class here
                onClick={handleContactUs}
                customWidth="100px"
                customHeight="40px"
                customBgColor="white"
                customTextColor="black"
                customBorderRadius="5px"
              >
                Contact Us
              </Button>
            )}
 </FalshyContainer>
< /Header >

这里还有 FalshyContainer.module.css 中的 customButton 类名

@media (max-width: 600px) {
    .customButton {
     background-color: red;
    }
  }

我正在尝试实现这样的自定义按钮类名称

 className={styles.customButton}

应该适用于我在 FalshyContainer 中用作子项的按钮。 但这种风格不适用。

Answer 1

请在此条件中使用此语法，

styles.customButton

只能在导入它的组件中访问。

自定义类customButton位于

FalshyContainer.module.css

中，我们需要确保样式的范围应用于Button

App.jsx 文件在这里：

import FalshyContainerStyles from './FalshyContainer.module.css'; // Import FalshyContainer styles

< Header >
    <FalshyContainer>
    <Username username={username} />
    {!isQuestionPageVisible && (
        <Button
        className={styles.customButton} // Apply the custom class here
        onClick={handleContactUs}
        customWidth="100px"
        customHeight="40px"
        customBgColor="white"
        customTextColor="black"
        customBorderRadius="5px"
        >
        Contact Us
        </Button>
    )}
    </FalshyContainer>
< /Header >

我们有导入样式：

styles.customButton

在FalshyContainer.module.css中定义，样式的范围仅限于该文件。您需要在应用 className

的位置导入 FalshyContainer.module.css