使用TypeScript与ReactJS进行样式开发：求按钮等控件样式示例

Hey there! No worries at all—let’s walk through some practical button styling examples using React + TypeScript, covering the most common approaches you’ll run into. I’ll keep it straightforward so you can pick what fits your project best.

Inline styles are great for one-off adjustments or dynamic styling where values change based on props. TypeScript plays nicely here because it automatically types React.CSSProperties for you.

import React from 'react';

// Define a type for our button's props
type ButtonProps = {
  children: React.ReactNode;
  onClick?: () => void;
  customStyle?: React.CSSProperties; // Optional custom styles to override base
};

const InlineStyledButton = ({ children, onClick, customStyle }: ButtonProps) => {
  // Base styles that apply to every instance of this button
  const baseStyles: React.CSSProperties = {
    padding: '10px 22px',
    border: 'none',
    borderRadius: '6px',
    fontSize: '16px',
    fontWeight: 500,
    cursor: 'pointer',
    backgroundColor: '#0071e3',
    color: 'white',
    transition: 'background-color 0.2s ease-in-out',
  };

  // Merge base styles with any custom styles passed in
  const finalStyles = { ...baseStyles, ...customStyle };

  return (
    <button onClick={onClick} style={finalStyles}>
      {children}
    </button>
  );
};

// Usage in your app
const App = () => {
  return (
    <div style={{ padding: '20px', gap: '12px', display: 'flex' }}>
      <InlineStyledButton onClick={() => alert('Default button clicked!')}>
        Default Button
      </InlineStyledButton>
      <InlineStyledButton 
        customStyle={{ backgroundColor: '#34c759', color: 'white' }}
      >
        Success Button
      </InlineStyledButton>
      <InlineStyledButton 
        customStyle={{ backgroundColor: 'transparent', border: '1px solid #0071e3', color: '#0071e3' }}
      >
        Outline Button
      </InlineStyledButton>
    </div>
  );
};

export default App;

CSS Modules are perfect if you prefer writing plain CSS but want to avoid class name collisions. TypeScript automatically recognizes the class names from your .module.css file.

First, create a Button.module.css file:

/* Button.module.css */
.baseButton {
  padding: 10px 22px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.primary {
  background-color: #0071e3;
  color: white;
}

.primary:hover {
  background-color: #0077ed;
}

.success {
  background-color: #34c759;
  color: white;
}

.success:hover {
  background-color: #30d158;
}

.outline {
  background-color: transparent;
  border: 1px solid #0071e3;
  color: #0071e3;
}

.outline:hover {
  background-color: rgba(0, 113, 227, 0.05);
}

Then your TypeScript component:

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

// Restrict variants to only valid options we defined in CSS
type ButtonProps = {
  children: React.ReactNode;
  onClick?: () => void;
  variant: 'primary' | 'success' | 'outline';
};

const CSSModuleButton = ({ children, onClick, variant }: ButtonProps) => {
  // Combine base class with the variant class
  const buttonClasses = `${styles.baseButton} ${styles[variant]}`;

  return (
    <button onClick={onClick} className={buttonClasses}>
      {children}
    </button>
  );
};

// Usage example
const App = () => {
  return (
    <div style={{ padding: '20px', gap: '12px', display: 'flex' }}>
      <CSSModuleButton variant="primary" onClick={() => alert('Primary clicked!')}>
        Primary Button
      </CSSModuleButton>
      <CSSModuleButton variant="success">Success Button</CSSModuleButton>
      <CSSModuleButton variant="outline">Outline Button</CSSModuleButton>
    </div>
  );
};

export default App;

Styled Components is a popular CSS-in-JS library that lets you write CSS directly in your TypeScript files. You’ll need to install it along with its TypeScript types first:

npm install styled-components @types/styled-components

Here’s how to create a styled button with variants:

import React from 'react';
import styled from 'styled-components';

// Create a styled button component with typed props
const StyledButton = styled.button<{ variant: 'primary' | 'success' | 'outline' }>`
  padding: 10px 22px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease-in-out;

  /* Apply styles based on the variant prop */
  ${props => {
    switch (props.variant) {
      case 'primary':
        return `
          background-color: #0071e3;
          color: white;
          &:hover {
            background-color: #0077ed;
          }
        `;
      case 'success':
        return `
          background-color: #34c759;
          color: white;
          &:hover {
            background-color: #30d158;
          }
        `;
      case 'outline':
        return `
          background-color: transparent;
          border: 1px solid #0071e3;
          color: #0071e3;
          &:hover {
            background-color: rgba(0, 113, 227, 0.05);
          }
        `;
    }
  }}
`;

// Optional wrapper component for extra prop safety
type ButtonProps = {
  children: React.ReactNode;
  onClick?: () => void;
  variant: 'primary' | 'success' | 'outline';
};

const StyledComponentButton = ({ children, onClick, variant }: ButtonProps) => {
  return (
    <StyledButton onClick={onClick} variant={variant}>
      {children}
    </StyledButton>
  );
};

// Usage example
const App = () => {
  return (
    <div style={{ padding: '20px', gap: '12px', display: 'flex' }}>
      <StyledComponentButton variant="primary" onClick={() => alert('Styled primary clicked!')}>
        Styled Primary
      </StyledComponentButton>
      <StyledComponentButton variant="success">Styled Success</StyledComponentButton>
      <StyledComponentButton variant="outline">Styled Outline</StyledComponentButton>
    </div>
  );
};

export default App;

Quick Pro Tips #

• Type Safety First: Always define props types (like ButtonProps)—this catches mistakes early and makes your code easier to maintain.
• Reusability: All these approaches let you create a single button component that you can reuse across your app, keeping styles consistent.
• Pick Your Tool: Choose the approach that matches your team’s workflow. CSS Modules are great for plain CSS lovers, while Styled Components shine for dynamic, component-specific styles.

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