在react spa应用程序中有条件地应用css样式

import React, { useState } from 'react';
import './styles.css';

function App() {
  const [isHighlighted, setIsHighlighted] = useState(false);

  return (
    <div>
      <button onClick={() => setIsHighlighted(!isHighlighted)}>
        Toggle Highlight
      </button>
      <div className={isHighlighted ? 'highlighted' : ''}>
        This element can be conditionally highlighted.
      </div>
    </div>
  );
}

export default App;

import React, { useState } from 'react';

function App() {
  const [isHighlighted, setIsHighlighted] = useState(false);

  const highlightStyle = {
    backgroundColor: isHighlighted ? 'yellow' : 'transparent',
    color: isHighlighted ? 'black' : 'inherit',
  };

  return (
    <div>
      <button onClick={() => setIsHighlighted(!isHighlighted)}>
        Toggle Highlight
      </button>
      <div style={highlightStyle}>
        This element can be conditionally highlighted.
      </div>
    </div>
  );
}

export default App;