在Material UI中将变量发送给withStyles? [英] Send Variable to withStyles in Material UI?

问题描述

我有以下内容:

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;

因此，它的作用是成功地获取了一个实质性的UI文本字段，并在用户单击该字段时将底部栏更改为白色，而不是蓝色.伟大的！

So what this does is it successfully takes a material UI text field and changes the bottom bar to be white, as opposed to blue, when the user clicks the field. Great!

...但是...

我真的想做的是

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

其中Styled如下所示:

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

，以便我可以动态地将颜色传递给Styled属性.显然，这是伪代码-我一直在使用它，但无法通过它.一般来说，material-ui会动态更改颜色，这真让人讨厌，所以我想知道是否有人知道如何使它生效.

so that I can dynamically pass colors to the Styled attribute. Clearly this is pseudo-code - I've been playing with it, but can't get it to fall through. As a general statement, material-ui is a bit of a bummer to dynamically change colors, so I was wondering if anyone knew how to get this to work.

谢谢！

解决方案 ...虽然不好.

我不确定如何将伪元素与makeStyles和功能组件一起使用，但这是一种对我有用的解决方案.在后人将其添加到这里，以防其他人发现它有用:

I'm not sure how to use pseudo-elements with makeStyles and functional components, but this is a solution that seems to work for my purposes. Adding it here for posterity in case anyone else may find it useful:

class StyledInputInner extends React.Component{

  styles = (color, theme) => ({
    underline: {
      '&:before': {
        borderBottom: `2px solid ${color}`,
      },
      '&:after': {
        borderBottom: `2px solid ${color}`,
      },
      '&:hover:not($disabled):before': {
        backgroundColor: `2px solid ${color}`
      },
      '&$focused:after': {
        borderBottom: `2px solid ${color}`
      },
    }
  })  

  textField = props => (
    <TextField
    placeholder="temp input"
    InputProps={{
      classes:{
        root: props.classes.underline
      },
      style:{
        height: '1.5rem',
        fontSize:'1rem',
        marginTop: '-1rem',
      }
    }}
    onClick={()=>this.props.onClick()}
    onChange={(evt)=>{this.props.onChange(evt)}}
    >
      <div>
        {props.children}
      </div>
    </TextField>
  )

  StyledTextField = withStyles(this.styles(this.props.color))(this.textField)

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

class StyledInput extends Component {
  render(){
    return(
      <MainContext.Consumer>
      {stateData => {
        return(
          <StyledInputInner 
          color={stateData.state.InputColor}
          onChange={(evt)=>this.props.onChange(evt)}
          onClick={this.props.onClick}
          > 
            {this.props.children} 
          </StyledInputInner>
        )      
      }}
      </MainContext.Consumer>
    )
  }
}

export default StyledInput;

推荐答案

以下是使用新的 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方法放在其自己的文件中，并将其重新用作自定义钩子，以使其生成的类(仍具有可变支持)可用于多个组件(而不只是).

If you wanted, you could put this useStyles method in its own file and re-use it as a custom hook to make the classes it generates (still with variable support) available to multiple components (rather than just StyledComponent).

这篇关于在Material UI中将变量发送给withStyles?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！