如何在 React 中设置选择元素的样式？答案

【问题标题】：How do I style a select element in React?如何在 React 中设置选择元素的样式？
【发布时间】：2021-06-13 12:18:21
【问题描述】：

现在我有一个如下所示的下拉菜单：

但我希望它看起来像这样：

如何设置 HTML select 元素的样式，使其变得像图片中一样透明？

GermanyLanguage 组件加载标志的 SVG 文件。 SwitcherContent 是一个div，由 styled-components 包设置样式。

  return (
    <>
      <SwitcherContent>
        <GermanyLanguage />
        <select
          name="select"
          style={{ width: 120, marginLeft: 8 }}
          defaultValue={intl.locale}
          onChange={(e) => changeLocale(e.target.value)}>
          <option value="de">deutsch</option>
          <option value="en">english</option>
        </select>
      </SwitcherContent>
    </>
  );

export const SwitcherContent = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
`;

背景：'bottom' 帮帮我，现在切换器看起来像 Image

【问题讨论】：

每个浏览器都为 select 等内置元素定义了自己的基本样式表。您需要覆盖所有默认样式属性，例如设置background: transparent;

标签： javascript css reactjs styled-components

【解决方案1】：

我认为你可以这样做。

<GermanyLanguage/> -> SVG file
  return (
    <>
      <SwitcherContent>
        <GermanyLanguage />
        <select
          name="select"
          style={{ width: 120, marginLeft: 8, background:"bottom" }}
          defaultValue={intl.locale}
          onChange={(e) => changeLocale(e.target.value)}>
          <option value="de">deutsch</option>
          <option value="en">english</option>
        </select>
      </SwitcherContent>
    </>
  );

export const SwitcherContent = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
`;

【讨论】：

没有帮助我加载图像，因为它看起来像背景：'bottom'

【解决方案2】：

每个浏览器都为 select 等内置元素定义了自己的基本样式表。您需要使用您想要的样式覆盖所有默认样式属性。

您可以通过向 style 属性添加属性来更改样式，就像对 style={{ width: 120, marginLeft: 8 }} 所做的那样，通过像在 SwitcherContent = styled.div 中所做的那样使用样式组件，或者通过在 CSS 文件中声明类并设置组件上的 className 属性。

您将需要覆盖background、color、border，可能还有更多。 background 属性可以是 transparent、unset 或 black。

这应该会让你朝着正确的方向开始：

return (
  <>
    <SwitcherContent>
      <GermanyLanguage />
      <select
        style={{
          width: 120,
          marginLeft: 8,
          background: "black",
          color: "white",
          border: "none"
        }}
        name="select"
        defaultValue={intl.locale}
        onChange={(e) => changeLocale(e.target.value)}
      >
        <option value="de">deutsch</option>
        <option value="en">english</option>
      </select>
    </SwitcherContent>
  </>
);

【讨论】：