Question

我一直在寻找使用material-ui进行react-admin的样式指南。但是我找不到有关如何对基于类的组件进行操作的示例。

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

先谢谢您。

Answer 1

user2002500。希望对您有所帮助。

首先，您需要导入wtihStyles

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( 
 ....
 )
}

第六，最后完成您添加的组件{... this.props}，添加带有class.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)

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

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

1 个答案: