如何更改复选框材质表ReactJS的颜色

Question

我在我的项目中使用“材料”表，并希望更改所选内容的复选框的颜色。怎么做？？

function BasicSelection() {
  return (
    <MaterialTable
      title="Basic Selection Preview"
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'Surname', field: 'surname' },
        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
        {
          title: 'Birth Place',
          field: 'birthCity',
          lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
        },
      ]}
      data={[
        { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
        { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
      ]}        
      options={{
        selection: true
      }}
    />
  )
}

Answer 1

我认为，如果您想更改该颜色，则很有可能在组件中的其他位置使用该颜色。大概考虑将表格主题化以匹配应用程序外观。材质表提供了一个主题摘录，您可以使用它来覆盖应用于复选框的默认secondary.main颜色。

Styling with MuiThemeProvider Example

function StylingWithMuiThemeProvider() {
  const theme = createMuiTheme({
    palette: {
      primary: {
        main: '#4caf50',
      },
      secondary: {
        main: '#ff0000',
      },
    },

  });

  return (
    <MuiThemeProvider theme={theme}>

    <MaterialTable
      title="Basic Selection Preview"
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'Surname', field: 'surname' },
        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
        {
          title: 'Birth Place',
          field: 'birthCity',
          lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
        },
      ]}
      data={[
        { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
        { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
      ]}        
      options={{
        selection: true
      }}
    />
    </MuiThemeProvider>
  )
}