无法将焦点样式应用于带样式的组件

.my-component:focus {
  outline: 2px solid blue;
}

<div class="parent">
  <MyComponent />
</div>

.parent:focus .my-component {
  outline: 2px solid blue;
}

import React, { useState } from 'react';

function MyComponent() {
  const [isFocused, setIsFocused] = useState(false);

  const handleFocus = () => {
    setIsFocused(true);
  };

  const handleBlur = () => {
    setIsFocused(false);
  };

  return (
    <div
      className={`my-component ${isFocused ? 'focused' : ''}`}
      onFocus={handleFocus}
      onBlur={handleBlur}
    >
      {/* Component content */}
    </div>
  );
}