如何使用类对象在 Reactjs 中设置功能性无状态组件的样式

Posted

技术标签:

【中文标题】如何使用类对象在 Reactjs 中设置功能性无状态组件的样式【英文标题】:How to style a functional stateless component in Reactjs using classes object 【发布时间】:2019-03-10 10:41:36 【问题描述】:

我想写a functional stateless component in ReactJs as described here的样式。

const MyBlueButton = props => 
  const styles =  background: 'blue', color: 'white' ;  
  return <button ...props style=styles />;
;

问题是我想添加一些styles from stateful components as described here。

const styles = theme => (
  root: 
    width: '100%',
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper,
  ,
);

问题是当我尝试做这样的事情时:

<div className=classes.root>

我得到错误:

'classes' 未定义 no-undef

如何访问 withStyles classes 对象以按照我想要的方式设置 root

【问题讨论】:

你想在这里使用react-jss库吗? 哦,对不起。 material-ui 在标签中,所以问题不是react-jss。但是,我还是不太明白这个问题 :) 你想将material-ui 与功能组件一起使用吗?我不太了解material-ui,但尝试过并从道具中获取classes 【参考方案1】:

如果我在这里理解的话,你可以如何使用功能组件来做到这一点。

const styles = theme => ( 
  root: 
    width: "100%",
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper,
  ,
 );

const App = ( props ) => 
  const  classes  = props;
  return <div className=classes.root>Foo</div>;
;

export default withStyles( styles )( App );

【讨论】:

以上是关于如何使用类对象在 Reactjs 中设置功能性无状态组件的样式的主要内容,如果未能解决你的问题,请参考以下文章

ReactJS - CSS:在样式对象中设置 trasitionProperty 不起作用

如何使用样式化组件在 reactjs 中设置 svg 样式

如何使用外部 css 在 Reactjs 中设置背景图像?

如何在 reactjs 中设置背景图片?

ReactJS中从父组件调用子函数时如何在子组件中设置状态

如何在 Material-UI、ReactJS 中从分页中设置分页项的样式?