如何在React样式化组件中只为一个道具设置多个样式？

import React from 'react';

const StyledComponent = ({ prop }) => {
  const styles = `
    background-color: ${prop === 'value1' ? 'red' : 'blue'};
    color: ${prop === 'value2' ? 'green' : 'yellow'};
  `;

  return <div style={styles}>Styled Component</div>;
};

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

const StyledComponent = ({ prop }) => {
  const className = prop === 'value1' ? 'class1' : 'class2';

  return <div className={className}>Styled Component</div>;
};

.class1 {
  background-color: red;
  color: green;
}

.class2 {
  background-color: blue;
  color: yellow;
}

import React from 'react';

const StyledComponent = ({ prop }) => {
  const style = prop === 'value1'
    ? { backgroundColor: 'red', color: 'green' }
    : { backgroundColor: 'blue', color: 'yellow' };

  return <div style={style}>Styled Component</div>;
};