Как стилизовать компонент, основанный на классах, на реакции-администратора? - PullRequest
Новая
       34

Как стилизовать компонент, основанный на классах, на реакции-администратора?

0 голосов
/ 27 декабря 2018

Я искал руководства по стилю для реакции-администратора, используя материал-интерфейс.Но я не смог найти пример того, как это делается для компонентов на основе классов.

Надеюсь, кто-то поделится своими знаниями.

Заранее спасибо.

1 Ответ

0 голосов
/ 23 апреля 2019

user2002500.Я надеюсь, что это может помочь вам.

1-й, вам нужно импортировать 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-й, деструктурируя классы из этого.props 

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

6-е, последнее возвращение к компоненту, который вы добавили: добавьте {... this.props}, добавьте свойство className с classes.image 

<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)

возможно, это не очень хорошее объяснение.Но я думаю, что это правильный шаг, если вы хотите использовать компонент класса, тогда компонент функции.

...