如何在react-admin上设置基于类的组件的样式？

Question

我一直在寻找react-admin的样式指南，使用material-ui。但我找不到一个如何为基于类的组件完成它的例子。

我希望有人分享他们的知识。

先感谢您。

Answer 1

user2002500。我希望这可以帮到你。

1，你需要导入withStyles

import { withStyles } from '@material-ui/core/styles';

2，在类之上创建一个变量

const styles = {
field: {
 widht: '80%' }
}

class Test extends Component {
....
}

3，将{... this.props}添加到要设置样式的组件中

<TextField source= "id" {...this.props}/>

4，导出默认时添加withStyles

export default withStyles(styles)(Test)

5，来自this.props的解构类

render() {
const { classes } = this.props
 return( 
 ....
 )
}

6，最后回到你添加{... this.props}的组件，添加带有classes.image的className属性

<TextField source= "id" className={classes.field} {...this.props}/>

例：

import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import { TextField, Edit, SimpleForm } from 'react-admin';

const styles = {
field: {
 widht: '80%' }
}

class Test extends Component {
 render() {
 const { classes } = this.props
  return (
  <Edit title={'Test'} {...this.props}>
   <SimpleForm>
    <TextField source= "id" className={classes.field} {...this.props}/> 
   </SimpleForm>
  </Edit>

  );
 }
}

export default withStyles(styles)(Test)

也许，这不是一个很好的解释。但我认为这是正确的步骤，如果你想使用类组件然后功能组件。