Javascript Material UI styled() 实用程序 如何递归更改突出显示的文本背景 colored颜色

Background

所以我想用一种文本高亮 colored颜色 来设置我的组件及其所有子组件的样式，例如黄色.但我只能在组件返回包装在元素本身中的文本，并且不会处理包装在其子元素或子组件中的任何文本的情况下才能这样做.

例如，这将更改高光 colored颜色 :

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;

Question

How would I be able to recursively set the style throughout my App?假设我最外层的元素是<Box></Box>，它有一个名为MuiBox-root的类，我们可以使用它.

我try 过以下方法，但都不管用:

// 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"
  },

如果突出显示显示的两行文本，可以看到第一行已设置样式，而第二行未设置样式