Question

我刚刚开始学习 React，我很困惑什么是为按钮（例如基本按钮）制作通用样式的最佳方法。

我想制作一个按钮组件，结果就是这样。

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


type Props = {
    onClick: () => void,
    className: string
};

function Button({onClick, className}: Props) {
    return (
        <button onClick={onClick} className={className}/>
    );
}

export default Button;

我希望某些样式是基础样式，并将其他样式作为道具，我还希望有一个 API 来覆盖基础样式，以防有任何用例（假设）

Answer 1

可以使用样式化组件创建全局Button组件

import styled from 'styled-components'

export const StyledButton=styled.button`
    //your styles
`

import {StyledButton} from './StyledButton.jsx'

function App({onClick,className}: Props) {
    return (
        <StyledButton onClick={onClick} className={className} />
    );
}

您还可以将 props 传递给样式化组件并有条件地渲染按钮

const StyledButton = styled.button`
    padding: 2px 5px;
    color: ${props => props.color ? props.color : "white"};
    border-radius: 3px;
`

function App({onClick,className}: Props) {
    return (
        <StyledButton onClick={onClick} color={className.color} />
    );
}

Answer 2

你可以看看一些著名的 React UI 库（antd、MU ...），看看它们是如何实现基本按钮的示例：antd

反应样式组件中的样式覆盖

2 个答案: