删除 Material-UI 中的复选框轮廓

Question

我想知道如何删除封装复选框的橙色框。我找不到删除它的方法？当我的鼠标点击那个部分时它确实出现了。

样式化网格

export const StyledDataGrid = styled(DataGridPro)(({ theme }) => ({
  backgroundColor: theme.palette.common.white,
  border: 0,
  "& .MuiDataGrid-columnHeader,  .MuiDataGrid-cell,  .MuiDataGrid-cellCheckbox":
    {
      border: 0,
      ":focus": {
        outline: "none",
      },
    },
  "& .MuiDataGrid-columnHeaders": {
    borderTopLeftRadius: "8px",
    borderTopRightRadius: "8px",
    backgroundColor: "#fbfbfc",
    textTransform: "uppercase",
    "& .MuiDataGrid-menuIcon": {
      display: "none",
    },
    "& .MuiDataGrid-columnHeaderTitle": {
      color: theme.palette.text.secondary,
    },
    "& .MuiDataGrid-columnHeader--sorted .MuiDataGrid-columnHeaderTitle": {
      color: theme.palette.text.primary,
    },
  },
  "& .MuiDataGrid-row, & .MuiDataGrid-cell": {
    maxHeight: "initial !important",
    minHeight: "initial !important",
  },
}));

组件

  <StyledDataGrid
    columns={supplierColumns}
    rows={rows}
    loading={rows.length === 0}
    disableSelectionOnClick
    checkboxSelection
    onSelectionModelChange={(ids) => setSelectedRowIds(ids)}
    pageSize={pageSize}
    onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
    rowsPerPageOptions={[5, 10, 20]}
    pagination
  />

Answer 1

我认为你必须直接添加大纲，或者尝试使用 pesudo focus-within 选择器

  export const StyledDataGrid = styled(DataGridPro)(({ theme }) => ({
      backgroundColor: theme.palette.common.white,
      border: 0,
      "& .MuiDataGrid-columnHeader,  .MuiDataGrid-cell,  .MuiDataGrid-cellCheckbox":
        {
          border: 0,
        outline: "none"
        },
    }));


  export const StyledDataGrid = styled(DataGridPro)(({ theme }) => ({
      backgroundColor: theme.palette.common.white,
      border: 0,
      "& .MuiDataGrid-columnHeader,  .MuiDataGrid-cell,  .MuiDataGrid-cellCheckbox":
        {
          border: 0,
          "& :focus-within": {
          outline: "none"
          }
        },
    }));

删除 Material-UI 中的复选框轮廓

Remove Checkbox Outline in Material-UI

reactjs

material-ui