样式选择下划线

问题描述 投票:1回答:1

我试图使用style-components来样式一个select组件的下划线.我成功地样式了一个Input组件的下划线.我知道Select是Input的一个封装器,但由于某些原因,同样的代码不能用于Select。

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

const StyledSelect = styled(Select)`
  && {
    && .MuiInput-underline {
      border-bottom: 2px solid green;
    }
    /* default */
    .MuiInput-underline:before {
      border-bottom: 2px solid green;
    }
    /* hover (double-ampersand needed for specificity reasons. */
    && .MuiInput-underline:hover:before {
      border-bottom: 2px solid lightblue;
    }
    /* focused */
    .MuiInput-underline:after {
      border-bottom: 2px solid red;
    }
  }
`;

export default StyledSelect;

代码和框

reactjs select material-ui
1个回答
1
投票

主要的问题是你的目标是 MuiInput-underline 类,仿佛它是一个 子孙Select但根div(就是那个由 styled-components 类名将被应用到)的 Select 是具有以下特征的元素 MuiInput-underline 类。

下面是一个正确语法的例子。

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

const StyledSelect = styled(Select)`
  /* default */
  &.MuiInput-underline:before {
    border-bottom: 2px solid green;
  }
  /* hover */
  &.MuiInput-underline:hover:before {
    border-bottom: 2px solid lightblue;
  }
  /* focused */
  &.MuiInput-underline:after {
    border-bottom: 2px solid red;
  }
`;

export default StyledSelect;

Edit TextField underline styled-components

我还对 索引.js 来包裹所有的东西 <StylesProvider injectFirst>. 一般来说,当你使用 styled-components 和Material-UI,这样Material-UI样式就会在 <head> 而不是最后一个。然后是 styled-components 样式将排在Material-UI样式之后,并在其他特殊性相同时获胜。这就避免了需要在类名中使用双倍的名字(例如,使用 &&)一样可以增加特异性。

import React from "react";
import ReactDOM from "react-dom";
import Demo from "./demo";
import { StylesProvider } from "@material-ui/core/styles";

ReactDOM.render(
  <StylesProvider injectFirst>
    <Demo style={{ width: "200px" }} value={1} />
  </StylesProvider>,
  document.querySelector("#root")
);

相关答案。Material-UI 4.1.2 样式选择 SelectInput

© www.soinside.com 2019 - 2024. All rights reserved.