在React中编写样式的六种方式

function MyComponent() {
  const myStyle = {
    color: 'blue',
    backgroundColor: 'lightgrey',
    padding: '10px',
    borderRadius: '5px'
  };

  return <div style={myStyle}>This is an inline styled div.</div>;
}

/* App.css */
.my-class {
  color: green;
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

import React from 'react';
import './App.css'; // 引入外部样式表

function App() {
  return <div className="my-class">This div uses external CSS.</div>;
}

export default App;

/* MyComponent.module.css */
.myStyledDiv {
  color: purple;
  background-color: pink;
  padding: 15px;
  border: 1px solid black;
}

import React from 'react';
import styles from './MyComponent.module.css'; // 引入CSS Module

function MyComponent() {
  return <div className={styles.myStyledDiv}>This div uses CSS Modules.</div>;
}

export default MyComponent;

npm install styled-components

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

const StyledDiv = styled.div`
  color: orange;
  background-color: white;
  padding: 25px;
  border: 2px dashed black;
`;

function MyStyledComponent() {
  return <StyledDiv>This div uses Styled Components.</StyledDiv>;
}

export default MyStyledComponent;

npm install @emotion/react @emotion/styled

import React from 'react';
import styled from '@emotion/styled';

const StyledDiv = styled.div`
  color: brown;
  background-color: lightgreen;
  padding: 10px 20px;
  border: 1px solid darkgrey;
`;

function MyEmotionComponent() {
  return <StyledDiv>This div uses Emotion.</StyledDiv>;
}

export default MyEmotionComponent;

npm install radium

import React from 'react';
import Radium from 'radium';

const MyStyledDiv = Radium(React.createClass({
  render() {
    return (
      <div style={[
        styles.base,
        styles.primary
      ]}>
        This div uses Radium.
      </div>
    );
  }
}));

const styles = {
  base: {
    color: '#fff',
    padding: '20px',
    borderRadius: '4px'
  },
  primary: {
    backgroundColor: '#0074d9'
  }
};

function MyRadiumComponent() {
  return <MyStyledDiv />;
}

export default MyRadiumComponent;