如何自定义React原生导航cardoverlay样式？

import React from 'react';

const Navigation = () => {
  const cardOverlayStyle = {
    backgroundColor: 'blue',
    color: 'white',
    fontSize: '16px',
    border: '1px solid black',
    // 其他样式属性
  };

  return (
    <div>
      <h1>Navigation</h1>
      <div style={cardOverlayStyle}>Card Overlay</div>
    </div>
  );
};

export default Navigation;

/* Navigation.module.css */
.cardOverlay {
  background-color: blue;
  color: white;
  font-size: 16px;
  border: 1px solid black;
  /* 其他样式属性 */
}

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

const Navigation = () => {
  return (
    <div>
      <h1>Navigation</h1>
      <div className={styles.cardOverlay}>Card Overlay</div>
    </div>
  );
};

export default Navigation;

import React from 'react';
import styled from 'styled-components';

const CardOverlay = styled.div`
  background-color: blue;
  color: white;
  font-size: 16px;
  border: 1px solid black;
  /* 其他样式属性 */
`;

const Navigation = () => {
  return (
    <div>
      <h1>Navigation</h1>
      <CardOverlay>Card Overlay</CardOverlay>
    </div>
  );
};

export default Navigation;