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

Question

背景

因此，我想将我的组件及其所有子组件的文本突出显示颜色设置为黄色。但是我只能在组件 returns 文本包含在元素本身中时才能执行此操作，并且不会处理包含在其子元素或子组件中的任何文本。

例如，这将改变高亮颜色：

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> 并且它有一个 class 命名为 MuiBox-root 我们可以使用。

我尝试了以下但 none 有效：


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

如果突出显示显示的两行文本，您可以看到第一行已设置样式，而第二行未设置样式。这是代码框 link

Answer 1

您可以尝试遵循它适用于所有子元素

const StyledBox = styled(Box)(({ theme }) => ({
  "::selection, *::selection": {
    backgroundColor: "#ffe20b"
  }
}));

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

Material UI styled() utility - How to recursively change highlighted text background color

javascript

css

reactjs

material-ui

styled-components