4

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

例如，是否有一个函数允许您访问组件下方的“样式”jss 对象中的“道具”，该对象最终使用 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',
  },
  MaterialComponentTwo: {
    css_propery: 'css_value',
  },
};

export default withTheme()(withStyles(styles)(MyPureComponent));

谢谢。

4

3 回答 3

4

您可以使用Material UI 附带的clsx库或类名库来有条件地将类名连接在一起。下面的示例使用类名库显示，您也可以使用 clsx 库来实现相同的结果。

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

function MyPureComponent(props) {
  return (
    <MaterialComponentOne
      position="static"
      className={classNames(
        props.classes.MaterialComponentOne, 
        {[props.classes.classOne]: props.type === 'secondary'}, 
        {[props.classes.classTwo]: props.type !== 'secondary'}
      )}

    >
      <MaterialComponentTwo>
        <MaterialComponentThree
          variant="title"
          className={classNames(
            props.classes.MaterialComponentThree, 
            {"props.classes.classOne": props.type === 'secondary'}, 
            {"props.classes.classTwo": props.type !== 'secondary'}
          )}
        >
          {props.title}
        </MaterialComponentThree>
      </MaterialComponentTwo>
    </MaterialComponentOne>
  );
}

const styles = {
  MaterialComponentOne: {
    css_property: 'css_value',
    css_property: 'css_value',
  },
  MaterialComponentTwo: {
    css_propery: 'css_value',
  },
  classOne: {
    css_property: 'css_value',
  },
  classTwo: {
    css_property: 'css_value'
  }
};

export default withTheme()(withStyles(styles)(MyPureComponent));



用法

该classNames函数接受任意数量的参数，可以是字符串或对象。参数'foo'是 的缩写{ foo: true}。如果与给定键关联的值是虚假的，则该键将不会包含在输出中。

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'
于 2018-08-10T09:01:26.750 回答
2

您可以使用styled-components。

基于文档Adapting based on props的示例：

import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.primary ? 'palevioletred' : 'white'};
  color: ${props => props.primary ? 'white' : 'palevioletred'};
`;

function MyPureComponent(props) {
  return (
    <div>
      <Button>Normal</Button>
      <Button primary>Primary</Button>
    </div>
  );
}
于 2018-08-10T08:17:19.517 回答
1

一种自然的方法是将 createStyles 钩子与 makeStyles 和 useStyles 一起使用。您可以通过将其设置为返回样式的箭头函数来在您正在样式化的元素中使用道具名称。此外，您还可以在 createStyles 钩子中设置其他元素的样式。这花了我一些时间，我希望任何人都觉得它有用。✨</p>

下面是作为另一个问题的答案提供的代码：（https://stackoverflow.com/a/69137307/10968401）

import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";

...
...


const classes = useStyles();

...
...

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: propName => ({
      border: "none",
      boxShadow: "none",
      cursor: propName ? "pointer" : "auto",
      width: "100%",
      backgroundColor: "#fff",
      padding: "15px 15px"
    }),

    updated: {
      marginTop: 12,
      fontWeight: 400,
      color: "#939393"
    }
  })
);
于 2021-09-10T19:48:55.560 回答