严重的UI Selectfield问题

时间:2018-08-20 06:23:40

标签: javascript reactjs components material-ui web-component

我正在尝试更改material-ui selectfield的按钮位置。但没有这样做。你们中有人遇到这个问题吗? 我想访问material-ui selectfield按钮的top属性。怎么做?

我分享了以下屏幕截图: enter image description here

我有以下代码。谁能帮忙解决这个问题?

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;

0 个答案:

没有答案