我正在尝试更改material-ui selectfield的按钮位置。但没有这样做。你们中有人遇到这个问题吗? 我想访问material-ui selectfield按钮的top属性。怎么做?
我有以下代码。谁能帮忙解决这个问题?
import React, { Component } from 'react';
import TextField from 'material-ui/TextField';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
const styles = {
floatingGlamNameLabelFocusStyle: {
color: '#A1A1A1',
top:'38px'
},
floatingPhoneStyle: {
top: '20px',
color: '#A1A1A1'
},
nameTextStyle: {
color: '#A1A1A1',
fontFamily: 'Muli',
fontSize: '14px',
fontWeight: 'bold'
}
};
const hintGlamGenderStyle = {
color: '#A1A1A1',
fontFamily: 'Muli',
fontSize: '14px',
lineHeight: '14px',
textAlign: 'left'
};
const items = [
<MenuItem key={1} value="Male" primaryText="Male" />,
<MenuItem key={2} value="Female" primaryText="Female" />,
];
class GlamUpload extends Component {
constructor(props) {
super(props);
this.state = {
glam_gen_value: null,
glam_name_text: "",
hide_glam_name_msg: true,
error_glam_name_msg: "",
error_flag: false,
charLength: 0,
dateAutoOk: false,
glamDateOfBirth: "",
glamDateChange: false
};
}
handleGlamGenderChange(e, index, value) {
this.setState({glam_gen_value: value});
//console.log(this.state.gen_value);
}
render() {
return(
<div className="name_text_outer">
<div className="row">
<div className="col-sm-6">
<div className="name_text_outer">
<SelectField
value={this.state.glam_gen_value}
onChange={this.handleGlamGenderChange.bind(this)}
floatingLabelText="Gender"
floatingLabelStyle={hintGlamGenderStyle}
floatingLabelFocusStyle={styles.floatingGlamNameLabelFocusStyle}
className="edit_name_text_field"
style={{textAlign: 'left', color: '#A1A1A1', fontFamily: 'Muli', fontSize: '14px', fontWeight: 'bold'}}
>
{items}
</SelectField>
</div>
</div>
<div className="col-sm-6">
</div>
</div>
</div>
);
}
}
export default GlamUpload;