如何将primary传入button.tsx组件并用于style.ts的样式条件判断

1. 在button.tsx中定义并接收primary属性 #

先在Button组件里声明primary作为可选布尔型props，再把它传递给样式生成逻辑：

// button.tsx
import React from 'react';
import { getButtonStyles } from './button.style';

interface ButtonProps {
  primary?: boolean;
  children: React.ReactNode;
  // 按需添加其他props，比如onClick、disabled等
}

const Button: React.FC<ButtonProps> = ({ primary = false, children, ...rest }) => {
  const buttonStyles = getButtonStyles({ primary });
  
  return (
    <button style={buttonStyles} {...rest}>
      {children}
    </button>
  );
};

export default Button;

2. 在button.style.ts中基于primary编写条件样式 #

创建接收配置参数的样式函数，通过primary值切换按钮的颜色、边框等样式：

// button.style.ts
interface ButtonStyleConfig {
  primary: boolean;
}

export const getButtonStyles = ({ primary }: ButtonStyleConfig) => ({
  padding: '8px 16px',
  border: 'none',
  borderRadius: '4px',
  cursor: 'pointer',
  // 根据primary属性切换核心样式
  backgroundColor: primary ? '#165DFF' : '#FFFFFF',
  color: primary ? '#FFFFFF' : '#333333',
  border: primary ? 'none' : '1px solid #E5E6EB',
});

3. 调用Button组件生成不同样式按钮 #

在父组件中通过传入primary属性，快速生成两种风格的按钮：

// 父组件示例
import Button from './button';

const App = () => {
  return (
    <div style={{ gap: '12px', display: 'flex' }}>
      <Button primary>主按钮</Button>
      <Button>次要按钮</Button>
    </div>
  );
};

export default App;

可选：用styled-components实现的写法 #

如果项目使用styled-components，也可以直接在样式组件中接收primary属性：

// button.tsx
import styled from 'styled-components';

interface StyledButtonProps {
  primary?: boolean;
}

const StyledButton = styled.button<StyledButtonProps>`
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  
  background-color: ${props => props.primary ? '#165DFF' : '#FFFFFF'};
  color: ${props => props.primary ? '#FFFFFF' : '#333333'};
  border: ${props => props.primary ? 'none' : '1px solid #E5E6EB'};
`;

const Button: React.FC<StyledButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>> = ({ primary, children, ...rest }) => {
  return <StyledButton primary={primary} {...rest}>{children}</StyledButton>;
};

export default Button;

内容的提问来源于stack exchange，提问作者inspiq