Question

我正在使用material-ui with react "material-ui": "^0.19.2"并尝试在表中放置SelectField。这个工作正常但是应用于选择组件的边距和/或填充正在做2个不需要的事情。首先是表行现在调整到选择的高度，这使得整行的大小太高。其次，行中其他所有内容的对齐都已关闭。

我的代码：

<SelectField
    value={ props.value }
    hintText="Select location.."
    style={ {
        width: 150,
        padding: 0,
        margin: 0
    } }
    onChange={ (event, key, payload) => this.updateLocation(event, payload, props.index, props.original.something) }>
        { ::this.createMenu() }
</SelectField>

createMenu = () => {
    const { locations } = this.props.list;
    return locations.map((location, i) => {
        return <MenuItem key={ i } value={ location } primaryText={ location } />
    });
}

如果我可以控制渲染的组件（Textfield ??）周围的样式，我会尝试让它适合，但SelectField上的样式道具似乎只设置了下拉列表的样式

我在这里的另一个选择可能是使用字段的弹出窗口并渲染自定义组件以将其附加到 - 但是在尝试使用时我没有太多运气。

Answer 1

SelectField上的以下道具给了我想要的东西：

   <SelectField
          value={props.value}
          hintText="Select location.."
          style={{
            width: 150,
            height: 15,
            lineHeight: 15,
            position: 'relative',
            textAlign: 'center',
            fontSize: '0.9em'
          }}
          menuStyle={{
            position: 'absolute',
            top: -12.5,
          }}
          underlineStyle={{
            position: 'relative',
            top: 20,
          }}
          onChange={(event, key, payload)=>this.updateLocation(event,payload,props.index,props.original.something)}
        >
          {
            ::this.createMenu()
          }
        </SelectField>

如果有人知道更好的方法，请添加答案，但现在这将回答我的问题。

Answer 2

<td id="\"intro-hello\"">Hello</td>

如何控制材质样式-ui SelectField

2 个答案: