![](/img/trans.png)
[英]How can I export a react material-ui component with 2 styles object? (material-ui V1)
[英]Material UI v1 with React - styling buttons
我正在尝试学习如何在React中使用Material UI。
我已将Material UI v1合并到我的项目中。
对编码来说,我什么都没有直觉到,所以我很难填补资源文档中剩下的线索之间的空白。
我知道我还没有掌握这个技巧,但是将其他人可以完成的工作拼凑起来,我在项目中设置了一个按钮,如下所示:
import React from 'react';
import Button from 'material-ui/Button';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import { fade } from 'material-ui/styles/colorManipulator';
const MyButton = (props) => {
return <span>
<Button {...props} />
</span>
};
export default MyButton;
然后,我尝试在几个地方使用我的按钮:
import React from 'react';
import MyButton from '../materialui/Button.js';
const style = {
background: '#FF5349',
color: 'white',
padding: '0 30px',
// marginBottom: '30px',
};
const Start = () => (
<span>
<MyButton style={style} size="large">
GET STARTED
</MyButton>
</span>
);
export default Start;
我正在尝试更改按钮的大小。
Material UI文档指示我应该能够通过插入size =“ large”来切换size属性。
文档中给出的示例是:
<Button size="large" className={classes.button}>
Large
</Button>
我尝试在启动组件中使用const样式,在启动组件中使用MyButton以及在Button组件本身中使用size =“ large”插入。 这些尝试都没有做任何改变大小的事情。 该按钮上的文本标签目前看起来很小,我不知道如何控制尺寸。
谁能看到增加按钮尺寸的方法吗?
这就是我一直在使用它的方式。
您需要设置按钮对象的根类(或另一个可用的类,请按组件参考每个可用类的文档)
import React, { Component } from "react";
import { withStyles } from "material-ui/styles";
import Button from "material-ui/Button";
const styles = theme => ({
button: {
width: "300px",
margin: "0 auto",
textTransform: "uppercase",
padding: "20px 30px",
alignSelf: "center",
},
});
class MyCustomButton extends Component {
render() {
const { classes } = this.props;
return (
<Button color="primary" raised={true} classes={{ root: classes.button }} />
);
}
}
export default withStyles(styles)(MyCustomButton);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.