使用react以编程方式更改CSS Stylesteet初始值

import React, { useState } from 'react';

function App() {
  const [color, setColor] = useState('blue');

  return (
    <div style={{ color: color }}>
      Click me to change color!
      <button onClick={() => setColor(color === 'blue' ? 'red' : 'blue')}>
        Change Color
      </button>
    </div>
  );
}

export default App;

npm install styled-components

import React, { useState } from 'react';
import styled from 'styled-components';

const StyledDiv = styled.div`
  color: ${props => props.color};
`;

function App() {
  const [color, setColor] = useState('blue');

  return (
    <StyledDiv color={color}>
      Click me to change color!
      <button onClick={() => setColor(color === 'blue' ? 'red' : 'blue')}>
        Change Color
      </button>
    </StyledDiv>
  );
}

export default App;