将不同的className赋予MenuProps和Parent Select Componens with styled-components

Question

我正在尝试自定义一个带有样式组件的MUI TextField精选组件。

ideia是样式化的-组件为Select字段和菜单提供了不同的类，因此我可以将它们的样式分开。

const StyledSelect = styled(({ className, ...props }) => {
    return (
        <TextField {...props}
            classes={{ root: className }}
            SelectProps={{
                MenuProps: {
                    classes: { paper: className, list: className },
                    anchorOrigin: {
                        vertical: "bottom",
                        horizontal: "left"
                    },
                    transformOrigin: {
                        vertical: "top",
                        horizontal: "left"
                    },
                    getContentAnchorEl: null
                },
            }}
        />
    )
})`
    & {
      background-color: #454D5D;
      border-radius: 10px;
      margin-top: 5px;
    }
    & li {
        color: #FFF;
    }
    &.MuiFormControl-root {
        background-color: transparent;
    }
    & .MuiListItem-root {
        font-size: 18px;
    }
    & .MuiListItem-root.Mui-selected {
        background-color: #1A2233;
    }
    & .MuiFormLabel-root {
        font-family: 'Roboto';
        font-weight: 300;
    }
    & .MuiInputLabel-shrink {
        color: ${props => props.color};
        font-weight: normal;
    }
    & .MuiInput-underline:after {
        border-bottom: 2px solid ${props => props.errors[props.field.name] && props.touched[props.field.name]
        ? CASABLANCA : props.color};
        transition: none;
        transform: none;
    }
    & .MuiInput-underline:before {
        border-bottom: 1px solid ${props => props.color}
    }
    & .MuiSelect-roo {
        color: black;
        font-family: 'Roboto';
        font-weight: 300;
    }  
    & .MuiSelect-select:focus {
        background: transparent;
    }
  `;

我希望我的TextField类不同于MenuProps类

Answer 1

解决这个问题的一种方法是为每个需要生成的类名创建一个包装器组件。在下面的示例中，StyledTextField负责TextField ( className属性is equivalent to classes.root)的根类名称，然后MenuPaperClass提供一个额外的类名。

import React from "react";
import ReactDOM from "react-dom";

import TextField from "@material-ui/core/TextField";
import MenuItem from "@material-ui/core/MenuItem";
import styled from "styled-components";

const StyledTextField = styled(TextField)`
  /* && to add specificity */
  && {
    border: 1px solid green;
  }
`;

const MenuPaperClass = styled(({ className, ...props }) => {
  return (
    <StyledTextField
      SelectProps={{ MenuProps: { classes: { paper: className } } }}
      value="1"
      select
      {...props}
    >
      <MenuItem value="1">One</MenuItem>
      <MenuItem value="2">Two</MenuItem>
      <MenuItem value="3">Three</MenuItem>
    </StyledTextField>
  );
})`
  && {
    background-color: lightblue;
  }
`;
function App() {
  return (
    <div className="App">
      <MenuPaperClass />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

​

​

这不是一个特别优雅的解决方案，如果您想使用3个或更多单独的类，则会变得相当单调乏味，所以稍后我可能会回到这里来考虑其他方法/语法，但它确实有效。