将变量发送到 Material UI 中的 withStyles？

Question

我有以下内容：

class StyledInput extends React.Component{


  styles = (color, theme) => ({
    underline: {
      borderBottom: `2px solid ${color}`,
      '&:after': {
        borderBottom: `2px solid ${color}`,
      }
    }
  })
  
  div = props => (
    <TextField
    placeholder="temp input"
    InputProps={{
      classes:{
        root: props.classes.underline
      },
      style:{
        height: '1.5rem',
        fontSize:'1rem',
        marginTop: '-1rem',
      }
    }}
    >
      <div>
        {props.children}
      </div>
    </TextField>
  )
  
  Styled = withStyles(this.styles('white'))(this.div)

  render(){
    return(
      <div>
        <this.Styled>{this.props.children}</this.Styled>
      </div>
    );
  }
}

export default StyledInput;

因此，它的作用是成功获取 material UI 文本字段，并在用户单击该字段时将底栏更改为白色，而不是蓝色。太棒了！

...然而...

我真正想做的是

<this.Styled color={someDefinedColor}>{this.props.children}</this.Styled>

其中 Styled 将如下所示：

Styled = (color) => withStyles(this.styles(color))(this.div)

这样我就可以将颜色动态传递给 Styled 属性。显然这是伪代码——我一直在玩它，但无法让它失败。作为一般性声明，material-ui 动态更改颜色有点令人不快，所以我想知道是否有人知道如何让它工作。

谢谢！

Answer 1

这是一个如何使用新 hook syntax:

执行此操作的示例

index.js

import React from "react";
import ReactDOM from "react-dom";
import StyledComponent from "./StyledComponent";
const CustomComponent = ({ children, className }) => {
  return (
    <p className={className}>
      Just showing passing in the component to use rather than automatically
      using a div.
      <br />
      {children}
    </p>
  );
};
function App() {
  return (
    <div className="App">
      <StyledComponent color="green">
        Here's my content with green underline
      </StyledComponent>
      <StyledComponent
        component={CustomComponent}
        color="blue"
        hoverColor="orange"
      >
        Here's my content with blue underline that changes to orange on hover.
      </StyledComponent>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

StyledComponent.js

import React from "react";
import { makeStyles } from "@material-ui/styles";
const useStyles = makeStyles({
  root: {
    borderBottom: ({ color }) => `2px solid ${color}`,
    "&:hover": {
      borderBottom: ({ color, hoverColor }) => {
        const borderColor = hoverColor ? hoverColor : color;
        return `2px solid ${borderColor}`;
      }
    }
  }
});

const StyledComponent = ({
  component: ComponentProp = "div",
  children,
  color,
  hoverColor
}) => {
  const classes = useStyles({ color, hoverColor });
  return <ComponentProp className={classes.root}>{children}</ComponentProp>;
};

export default StyledComponent;

如果你愿意，你可以把这个 useStyles 方法放在它自己的文件中，然后将它重新用作自定义挂钩，使它生成的类（仍然有变量支持）可用于多个组件（而不仅仅是 StyledComponent）。

Answer 2

这是一个示例，说明如何像样式化组件一样将道具或道具和主题都与 makeStyles() 一起使用

component.js

import { tableCellStyling } from './component.styled.js';

const RenderRow = (props) => {
    const { noPaddingTopBottom } = tableCellStyling(props);
    return(
        <StyledTableRow>
            {data.map( (row,i) => (
                <StyledTableCell className={noPaddingTopBottom}>
                    {row.data}
                </StyledTableCell>
            )}
        </StyledTableRow>
    )
};

假设我的 props 对象被 RenderRow 组件传递给 tableCellStyling，其中包含 { color: 'grey', thinRow: true }

component.styled.js

import { makeStyles } from '@material-ui/core/styles';

export const tableCellStyling = makeStyles(theme => ({
    noPaddingTopBottom: {
        borderBottom: ({ color }) => color ? `2px solid ${color}` : '2px solid red',
        paddingBottom: props => props.hasActions && 0,
        paddingTop: props => props.hasActions && 0,
        backgroundColor: theme.palette.common.white,
    },
}));

将变量发送到 Material UI 中的 withStyles？

Send Variable to withStyles in Material UI?

css

reactjs

material-ui

wrapper

higher-order-components