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

问题描述

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

。怎么做？？

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',birthYear: 2017,birthCity: 34 },]}        
      options={{
        selection: true
      }}
    />
  )
}

解决方法

我认为，如果您想更改该颜色，则很有可能在组件中的其他位置使用该颜色。大概考虑将表格主题化以匹配应用程序外观。材质表提供了一个主题摘录，您可以使用它来覆盖应用于复选框的默认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',birthYear: 2017,birthCity: 34 },]}        
      options={{
        selection: true
      }}
    />
    </MuiThemeProvider>
  )
}