Утилита Material UI styled () — как рекурсивно изменить цвет фона выделенного текста

Фон

Итак, я хочу стилизовать свой компонент и все его дочерние элементы с цветом выделения текста, например, желтым. Но я могу сделать это только в том случае, если компонент возвращает текст, завернутый в сам элемент, и не будет работать с любым текстом, завернутым в его дочерние элементы или дочерние компоненты.

Например, это изменит цвет выделения:

import React from "react";
import { Container, styled } from "@mui/material";

const StyledContainer = styled(Container)(({ theme }) => ({
  "::selection": {
    backgroundColor: "#ffe20b"
  },

}));

function App() {
  return <StyledContainer>hello world</StyledContainer>;
}

export default App;

Но если я оберну текст в дочерний элемент div, стиль не будет работать.

import React from "react";
import { Container, styled } from "@mui/material";

const StyledContainer = styled(Container)(({ theme }) => ({
  "::selection": {
    backgroundColor: "#ffe20b"
  },

}));

function App() {
  return <StyledContainer><div>hello world</div></StyledContainer>;
}

export default App;

Вопрос

Как я могу рекурсивно установить стиль во всем приложении? Допустим, мой самый удаленный элемент — это <Box></Box>, и у него есть класс с именем MuiBox-root, который мы можем использовать.

Я пробовал следующее, но никто не работал:

// didn't work
const StyledContainer = styled(Container)(({ theme }) => ({
  margin: theme.spacing(0),
  ".MuiBox-root::selection": {
    backgroundColor: "#ffe20b"
  },

// the following didn't work either

const StyledContainer = styled(Container)(({ theme }) => ({
  margin: theme.spacing(0),
  ".MuiBox-root > * ::selection": {
    backgroundColor: "#ffe20b"
  },

Если вы выделите отображаемые две строки текста, вы увидите, что первая строка оформлена, а вторая — нет. Вот коды и коробка связь