小编Nei*_*ble的帖子

如何根据道具应用样式?

我正在使用 React 和 Material-ui,目前我正在做类似下面的代码的事情。
有没有更好的办法?

例如,是否有一个函数允许您访问组件下面的“styles”jss对象中的“props”,该对象最终使用 withStyles() 注入到组件中,而不必执行所有这些丑陋的内联样式?

import React from 'react';
import {
  MaterialComponentOne,
  MaterialComponentTwo,
  MaterialComponentThree,
} from '@material-ui/core';

function MyPureComponent(props) {
  return (
    <MaterialComponentOne
      style={
        props.type === 'secondary'
          ? {
              css_property: 'css_value1',
            }
          : {
              css_property: 'css_value2',
            }
      }
      className={props.classes.MaterialComponentOne}
      position="static"
    >
      <MaterialComponentTwo>
        <MaterialComponentThree
          style={
            props.type === 'secondary'
              ? {
                  css_property: 'css_value1',
                }
              : {
                  css_property: 'css_value2',
                }
          }
          variant="title"
          className={props.classes.MaterialComponentThree}
        >
          {props.title}
        </MaterialComponentThree>
      </MaterialComponentTwo>
    </MaterialComponentOne>
  );
}

const styles = {
  MaterialComponentOne: {
    css_property: 'css_value',
    css_property: 'css_value', …
Run Code Online (Sandbox Code Playgroud)

reactjs material-ui jss

5
推荐指数
1
解决办法
4997
查看次数

标签 统计

jss ×1

material-ui ×1

reactjs ×1