如何使用样式组件自定义 mui daterange答案

【问题标题】：How to customize mui daterange with styled components如何使用样式组件自定义 mui daterange
【发布时间】：2022-01-08 11:27:47
【问题描述】：

是否可以使用样式组件自定义 mui 日期范围？我试图从 chrome 开发工具中获取样式并更改它们，但没有任何反应。有什么想法吗？

Image with daterange classes

const DesktopDateRangePickerStyled = styled(DesktopDateRangePicker)`
  &&& {
    .css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input {
      color: green !important;
    }

    .MuiInputBase-input-MuiOutlinedInput-input {
      color: green !important;
    }

    .MuiOutlinedInput-input {
      color: green !important;
    }
    .MuiInputBase-input {
      color: green !important;
    }


     
  }
`;

【问题讨论】：

标签： reactjs material-ui styled-components

【解决方案1】：

是的，您可以使用样式组件自定义日期范围选择器。不幸的是，目前 MUI 似乎没有为日期范围提供任何 CSS API，但您仍然可以使用嵌套选择器来自定义它。

不确定您的组件在 HTML 中的结构是什么样的，但输入不是 DesktopDateRangePicker 组件的一部分。您必须围绕所有必需的日期范围选择器组件创建一个容器，然后覆盖 CSS 类。此外，您的代码中不需要“&&&”。这是一个工作示例：

Try it in CodeSandBox

import * as React from "react";
import TextField from "@mui/material/TextField";
import AdapterDateFns from "@mui/lab/AdapterDateFns";
import LocalizationProvider from "@mui/lab/LocalizationProvider";
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import DesktopDateRangePicker from "@mui/lab/DesktopDateRangePicker";
import { styled } from "@mui/system";

export default function ResponsiveDateRangePicker() {
  const [value, setValue] = React.useState([null, null]);

  return (
    <DateContainer>
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <Stack spacing={3}>
          <DesktopDateRangePicker
            startText="Desktop start"
            value={value}
            onChange={(newValue) => {
              setValue(newValue);
            }}
            renderInput={(startProps, endProps) => (
              <React.Fragment>
                <TextField {...startProps} />
                <Box sx={{ mx: 2 }}> to </Box>
                <TextField {...endProps} />
              </React.Fragment>
            )}
          />
        </Stack>
      </LocalizationProvider>
    </DateContainer>
  );
}

const DateContainer = styled("div")`
  .css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input {
    color: red;
  }

  .MuiInputBase-input-MuiOutlinedInput-input {
    color: red;
  }

  .MuiOutlinedInput-input {
    color: red;
  }
  .MuiInputBase-input {
    color: red;
  }
`;

【讨论】：