时间戳

首页 > 解决方案 > 如何将自定义 CSS 添加到我的 React 组件并覆盖默认 CSS 值？

reactjs - 如何将自定义 CSS 添加到我的 React 组件并覆盖默认 CSS 值？

问题描述

我的按钮有一个组件，它有自己的 css 文件，但我试图弄清楚如何将 className 直接添加到组件并更改移动视图的 CSS。现在，Button.css 文件覆盖了所有内容，我添加到组件中的新 className 甚至没有显示在 html 中。

这是 Button.js 文件

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

    const STYLES = [
        'btn--primary',
        'btn--outline'
    ]

    const SIZES = [
        'btn--medium',
        'btn--large'
    ]

    export const Button = ({ 
        children, 
        type, 
        onClick, 
        buttonStyle, 
        buttonSize 
    }) => {

        const checkButtonStyle = STYLES.includes(buttonStyle) ? buttonStyle : STYLES[0]

        const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0]

        return (
            <button className={`btn ${checkButtonStyle} ${checkButtonSize}`} onClick={onClick} type={type}>
                {children}
            </button>
        )
    }

这是 Button.css

             :root {
            --primary: #3acbf7;
        }

        .btn {
            padding: 8px 20px;
            border-radius: 4px;
            outline: none;
            border: none;
            cursor: pointer;
        }

        .btn:hover {
            background-color: transparent;
            color: #fff;
            padding: 8px 20px;
            border-radius: 4px;
            border: solid 2px var(--primary);
            transition: all 0.3s ease-out;
        }

        .btn--primary {
            background-color: var(--primary);
        } 

        .btn--outline {
            background-color: transparent;
            color: #fff;
            padding: 8px 20px;
            border-radius: 4px;
            border: solid 1px var(--primary);
            transition: all 0.3s ease-out;
        }

        .btn--medium {
            padding: 8px 20px;
            border-radius: 4px;
            font-size: 18px;
            color: #fff;
        }

        .btn--large {
            padding: 12px 26px;
            border-radius: 4px;
            font-size: 20px;
            color: #fff;
        }

这是我尝试添加自定义类名来覆盖上面代码的主要组件。请注意，此代码位于 Navbar 组件内。

        import React, { Component } from 'react';
        import { MenuItems } from "./MenuItems"
        import { Button } from "../Button"
        import './Navbar.css'

        class Navbar extends Component {
            render() {
                return (
                    <nav className="NavbarItems">
                    <Button className="btn-mobile">Sign Up</Button>
                    </nav>
                    
                )
            }
        }

如果我尝试将 .btn-mobile 添加到我的 Navbar.css，则 html 中不会显示任何属性。我试图添加一个ID，但仍然没有工作。不确定如何自定义按钮，因为它是具有预设属性的组件

标签： reactjs

解决方案

我通常实现这一点的方式是接受className作为道具并将其传播到元素的默认类中，如下所示：

const Button = ({className='', text, ...rest}) => (
  <button className={`my-button-class ${className}`} {...rest}>{text}</button>
)

然后你可以像这样使用它：

<Button className="my-custom-class" text="press me" id="my-id" />

它会呈现为

<button class="my-button-class my-custom-class" id="my-id">press me</button>

通过将 prop 默认为className空字符串，"undefined"如果实现未通过className. 请注意，我们还传播了通过的任何其他道具。

推荐阅读