React Material Design选择和样式化组件

Question

我想使用Select interoperability来为https://material-ui.com/api/select/#select中的styled-components组件设置样式

我尝试了类似的方法：

const StyledForm = styled.form`
  display: flex;
  flex-wrap: wrap;
  color: #fff;
  paddingRight: 10px;
`
const StyledFormControl = styled(FormControl)`
  && {
    margin-left: 0;
    min-width: 120px;
  }
`
const StyledInput = styled(Input)`
  && {
    padding-top: 0;
    margin-top: 10px;
  }
`
const StyledMenuItem = styled(MenuItem)`
  && {
    font-size: 13px;
    font-weight: 600;
  }
`

const StyledInputLabel = styled(InputLabel)`
  && {
    width: 185px;
    color: #fff;
  }
`
// THIS ONE NOT WORKING 
const StyledSelect = styled(Select)`
  & .root {
    height: 100px
  }
`

...

render() {
    return (
      <StyledForm autoComplete="off">
        <StyledFormControl>
          <StyledInputLabel
            htmlFor="interval-select"
            focused={false}
          >
              Predictions time interval:
          </StyledInputLabel>
          <StyledSelect
            value={this.state.interval}
            onChange={this.handleChange}
            input={
              <StyledInput name="interval" disableUnderline={true}  id="interval-select" />
            }
          >
            <StyledMenuItem value={1}>Last week</StyledMenuItem>
            <StyledMenuItem value={2}>Last 2 weeks</StyledMenuItem>
          </StyledSelect>
        </StyledFormControl>
      </StyledForm>
    )
  }

Answer 1

一种方法是使用此模式：

const StyledSelect = styled(Select).attrs({ 
  classes: { root: 'root'} 
})` 
 .root  {
   color: #fff;
 }
`