在react js中处理函数组件中的样式

function MyComponent() {
  const styles = {
    color: 'red',
    fontSize: '16px',
    fontWeight: 'bold'
  };

  return <div style={styles}>Hello World</div>;
}

import styles from './MyComponent.module.css';
import classNames from 'classnames';

function MyComponent() {
  const isHighlighted = true;

  const componentClasses = classNames(styles.container, {
    [styles.highlighted]: isHighlighted
  });

  return <div className={componentClasses}>Hello World</div>;
}

import styled from 'styled-components';

const StyledDiv = styled.div`
  color: red;
  font-size: 16px;
  font-weight: bold;
`;

function MyComponent() {
  return <StyledDiv>Hello World</StyledDiv>;
}