如何在react Js中管理不同布局的不同css样式？

render() {
  const layoutType = this.props.layoutType;
  let layoutClass = '';

  if (layoutType === 'grid') {
    layoutClass = 'grid-layout';
  } else if (layoutType === 'flex') {
    layoutClass = 'flex-layout';
  }

  return (
    <div className={layoutClass}>
      {/* 内容 */}
    </div>
  );
}

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

render() {
  const layoutType = this.props.layoutType;
  const layoutClass = classNames({
    [styles.gridLayout]: layoutType === 'grid',
    [styles.flexLayout]: layoutType === 'flex',
  });

  return (
    <div className={layoutClass}>
      {/* 内容 */}
    </div>
  );
}

import styled from 'styled-components';

const GridLayout = styled.div`
  /* 样式定义 */
`;

const FlexLayout = styled.div`
  /* 样式定义 */
`;

render() {
  const layoutType = this.props.layoutType;

  return (
    <>
      {layoutType === 'grid' && <GridLayout>{/* 内容 */}</GridLayout>}
      {layoutType === 'flex' && <FlexLayout>{/* 内容 */}</FlexLayout>}
    </>
  );
}