如何使用MUI的createTheme全局修改::selection的颜色和背景色

嘿，这个需求我之前做项目的时候刚好碰到过，用Material UI的createTheme()来全局定制文本选中样式其实非常直观，核心就是借助主题的components配置来注入全局的伪元素样式。下面给你一步步拆解：

核心思路 #

::selection是CSS伪元素，用来定义文本选中时的样式。我们可以通过自定义CssBaseline组件的样式覆盖，把这个伪元素样式全局注入到应用里——毕竟CssBaseline是MUI用来做全局样式重置和基础样式统一的组件，刚好适合干这个事儿。

具体实现代码 #

首先，在创建主题的时候，给MuiCssBaseline添加styleOverrides：

import { createTheme, ThemeProvider, CssBaseline } from '@mui/material/styles';

const customTheme = createTheme({
  // 这里可以保留你原本的主题配置，比如palette、typography等
  palette: {
    primary: {
      main: '#1976d2',
    },
  },
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        // 全局 body 的文本选中样式
        'body::selection': {
          backgroundColor: '#ffcc80', // 替换成你想要的背景色
          color: '#212121', // 替换成你想要的文本颜色
        },
        // 如果你需要覆盖输入框、文本域的选中样式，可以追加下面的规则
        'input::selection, textarea::selection, [contenteditable]::selection': {
          backgroundColor: '#ffcc80',
          color: '#212121',
        },
      },
    },
  },
});

然后，把你的应用用ThemeProvider包裹，并且确保CssBaseline被引入（它会自动应用我们刚才定义的全局样式）：

function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <CssBaseline />
      {/* 你的应用所有内容都放在这里 */}
      <div>试试选中这段文本，看看样式是不是生效了！</div>
    </ThemeProvider>
  );
}

进阶技巧：复用主题色 #

如果想让选中样式和你的主题色保持统一，还可以用主题函数来动态获取颜色，这样后续修改主题色的时候，选中样式会自动同步：

styleOverrides: {
  'body::selection': {
    backgroundColor: (theme) => theme.palette.primary.light,
    color: (theme) => theme.palette.common.white,
  },
}

注意事项 #

• 一定要确保CssBaseline组件被正确渲染在ThemeProvider内部，否则自定义的全局样式不会生效
• 如果你的应用里有其他局部CSS样式优先级更高，可能会覆盖这个全局样式，这时候可以调整样式的特异性（比如给选择器加更多层级），或者尽量避免使用!important（万不得已再用）

这样配置完之后，整个应用里所有文本的选中样式就都会统一成你定义的样子啦！

内容的提问来源于stack exchange，提问作者Rohil