Css 如何在不使用 sx props 的情况下从 Select 样式中定位 mui paper 组件

发布于07月03日

我正在try 使用Style函数设置Select MUI组件的样式.因为我想在以后分享这种风格，所以我不想继续使用SX.我try 了几种方法，但我没有找到合适的类来直接从带样式的函数中定位Paper

// Styled 
export const StyledSelect = styled(Select)<SelectProps>(({ theme }) => ({
  textAlign: 'start',
  margin: '5px',
  fontWeight: 800,
  
  '& .MuiSelect-select': {
    // List
    '& .MuiList-root': {
      color: 'green',
      backgroundColor: 'red',
    },
    // Paper 
    '& .MuiMenu-paper': {
      backgroundColor: 'red',
    },
  },
})

// Component
<FormControl>
  <StyledSelect
  variant={variant}
  labelId='select-label'
  // This works 100%
  // MenuProps={{
  //   PaperProps: {
  //     sx: {
  //       backgroundColor: 'transparent',
  //       backdropFilter: 'blur(10px)',
  //     },
  //   },
  // }}
  name={name}
  disabled={disabled}
  value={value}

  onChange={onChangeFn}
  displayEmpty
  >
  </StyledSelect>
</FormControl>

推荐答案

默认Select中的MUIPaper作为样式化组件一直比较难处理，因为Paper属于Select‘S DOM层次 struct 之外(由于它使用了Portal).为了设置它(和Select)的样式，您首先需要设置Select的样式，然后使用样式设置为Select的Select作为设置Paper样式的基础组件.例如:

const BaseSelect = styled(Select)(({ theme }) => ({
  backgroundColor: "green", // Added just for the example
  textAlign: 'start',
  margin: '5px',
  fontWeight: 800,
}));

// To style the Menu Paper
const StyledSelect = styled(({ className, ...props }: SelectProps) => (
  <BaseSelect {...props} MenuProps={{ PaperProps: { className } }} />
))(({ theme }) => ({
  backgroundColor: "red", // Added just for the example
  // backgroundColor: "transparent",
  backdropFilter: "blur(10px)"
}));

...

// Use as you normally would
// <StyledSelect ... >

Working CodeSandbox:https://codesandbox.io/s/styled-mui-select-and-paper-2dmpct?file=/demo.tsx