如何使用React和CSS内联标题和NavLinks

import React from 'react';
import './styles.css'; // 假设你的CSS文件名为styles.css

render() {
  const titleStyle = {
    color: 'blue',
    fontSize: '20px',
    fontWeight: 'bold'
  };

  return (
    <div>
      <h1 style={titleStyle}>标题</h1>
      {/* 其他组件内容 */}
    </div>
  );
}

npm install react-router-dom

import { NavLink } from 'react-router-dom';

render() {
  return (
    <div>
      <nav>
        <NavLink to="/home" activeClassName="active">首页</NavLink>
        <NavLink to="/about" activeClassName="active">关于</NavLink>
        <NavLink to="/contact" activeClassName="active">联系我们</NavLink>
      </nav>
      {/* 其他组件内容 */}
    </div>
  );
}

h1 {
  color: blue;
  font-size: 20px;
  font-weight: bold;
}

nav {
  display: flex;
}

nav a {
  margin-right: 10px;
  text-decoration: none;
  color: black;
}

nav a.active {
  font-weight: bold;
}