переместите стиль пользовательского интерфейса материала в другой файл в React

#javascript #reactjs #typescript #material-ui

Вопрос:

Я пишу приложение с материалом-пользовательским интерфейсом, реакцией и машинописным текстом. стандартный код <Grid> is

 <Grid
  container
  direction="row"
  justifyContent="center"
  alignItems="center"
/>

после более красивого формата, который занимал слишком много строк. Я предпочитаю такой стиль кода, как

 <Grid props={"grid-root"}/>

 grid-root: {
  container
  direction="row"
  justifyContent="center"
  alignItems="center"
}

таким образом, я могу переместить код стиля в другой файл.

Любое предложение будет оценено по достоинству

Ответ №1:

Ты можешь сделать это вот так

 const GridProps = {
    container: true,
    direction: 'row',
    justifyContent: 'center',
    alignItems: 'center'
}

<Grid {...GridProps} />

Вот рабочий пример: https://codesandbox.io/s/confident-leftpad-n7mup?file=/src/App.js

1. Спасибо за ваш ответ. Я попробовал и получил сообщение об ошибке. Type 'string' is not assignable to type 'GridItemsAlignment | undefined'. TS2769 около <Grid>

2. const GridProps: GridProps = {} работает, еще раз спасибо

3. о, вы написаны на машинке, я забыл

4. Если вам понравился мой ответ или вы получили какую-либо помощь от моего ответа, не забудьте проголосовать и проверить этот ответ как лучший для вас, нажав на стрелку вправо, спасибо!

5. Я принимаю ваш ответ, но не могу проголосовать за него, так как у меня недостаточно репутации. Я думаю, что мне нужно потратить больше времени на переполнение стека

Ответ №2:

Если вы планируете использовать его повторно, подумайте о том, чтобы добавить его в свою тему в качестве миксина.

 // theme.js (or whatever you have for your theme)
const theme = createTheme({
  mixins: {
    gridProps: {
      container: true,
      direction: 'row',
      justifyContent: 'center',
      alignItems: 'center'
    },
  },
})

// component file
import { Grid, useTheme } from '@material-ui/core'

const component = () => {
  const theme = useTheme();

  render(
    <Grid {...theme.mixins.gridProps}>

    </Grid>
  )
}