React：只要页面大小调整为 iPad 或更小，插入符号图标就会一直移到下拉菜单之外

Question

我有一个样式化的 React 组件，它有一个包含插入符号图标的手动滚动下拉菜单，每次我测试下拉菜单的响应能力时，插入符号图标都会弹出。我已经将下拉菜单包裹在一个更大的组件中，以将所有内容放在同一行上，然后将图标包含在样式化的 select 组件中。我在另一个应用程序中使用了这种方法，下拉菜单完全响应并且图标放置没有任何问题，所以我对这个完全摸不着头脑。任何 help/suggestions 都很好

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { FaCaretDown } from 'react-icons/fa'
import Table from '../core/Table'
import SubHeader from '../elements/SubHeader'
import EligibleOffer from './EligibleOffer'
import { tableDataProps, tableColumnProps } from '../../propTypes'

const BUNDLE_KEY = 'bundle'
const rowKey = 'id'

class OfferBundlesTable extends Component {
  static propTypes = {
    bundles: PropTypes.arrayOf(tableDataProps),
    columns: tableColumnProps,
    viewedOfferIds: PropTypes.arrayOf(PropTypes.string),
    onBundleSelect: PropTypes.func
  }

  static defaultProps = {
    viewedOfferIds: []
  }

  renderCell = (cell = {}) => (
    <div>
      {cell.title && <SubHeader>{cell.title}</SubHeader>}
      <p>{cell.details}</p>
    </div>
  )

  renderBundle = bundle => (
    <StyledOffer
      offer={bundle}
      onOfferSelect={this.props.onBundleSelect}
      viewed={this.props.viewedOfferIds.includes(bundle.OfferId)}
    />
  )

  getColumns = columns =>
    Object.entries(columns).reduce(
      (cols, [key, value]) => ({
        ...cols,
        [key]: {
          ...value,
          renderCell: key === BUNDLE_KEY ? this.renderBundle : this.renderCell
        }
      }),
      {}
    )

  render() {
    const { bundles = [], columns = [] } = this.props

    return (
      <div>
        <DropdownRow>
          <StyledSelect>
            <StyledStrong>SORT BY: </StyledStrong>
            <select>
              <option>Default</option>
              <option>Promo Price (High to Low)</option>
              <option>Promo Price (Low to High)</option>
              <option>Alphabetically (A-Z)</option>
              <option>Alphabetically (Z-A)</option>
              <option>Internet Tier (High to Low)</option>
              <option>Internet Tier (Low to High)</option>
            </select>
            <StyledSelectIcon size="1.5rem" />
          </StyledSelect>
          <StyledSelect>
            <StyledStrong>CONTRACT TERMS (MONTHS):</StyledStrong>
            <select>
              <option>36</option>
              <option>24</option>
              <option>12</option>
            </select>
            <StyledSelectIcon size="1.5rem" />
          </StyledSelect>
        </DropdownRow>
        <StyledTable
          rowKey={rowKey}
          rows={bundles}
          columns={this.getColumns(columns)}
        />
      </div>
    )
  }
}

const StyledTable = styled(Table)`
  th:first-child {
    width: 25%;
  }
`

const StyledOffer = styled(EligibleOffer)`
  margin-bottom: 15px;
`

const DropdownRow = styled.div`
    th:first-child {
    width: 25%;
  } 

  flex: 1;
  display: flex;
  align-items: stretch;
  padding: 20px 30px 20px 10px;
  width: 60%;
  margin-left: 42%;
`

const StyledSelectIcon = styled(FaCaretDown)`
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  margin: auto;
  color: black;
  pointer-events: none;
`

const StyledSelect = styled.div`
  position: relative;
  margin-left: auto;


  select {
    padding: 5px 45px 5px 10px;
    font-size: 1.2rem;
    line-height: 1.4rem;
    font-weight: 500;
    color: black;
    border: 2px solid black;
    height: 36px;
    appearance: none;
    background: transparent;
    border-radius: 0;
  }
`

const StyledStrong = styled.strong`
  padding-right: 5px;
`

export default OfferBundlesTable

Answer 1

在查看您的代码后，我会建议一种替代方法，包括 css 中的插入符号用于您的 select。这使得它不可能离开 select，因为它现在是它的一部分。运行下面的片段可以看到它的工作——当然你会想把那些东西放到 styled-component css 定义中，并完全删除 <StyledSelectIcon/> (here's a forked stackblitz).

样式化组件定义：

const StyledSelect = styled.div`
  position: relative;
  margin-left: auto;

  select {
    padding: 5px 45px 5px 10px;
    font-size: 1.2rem;
    line-height: 1.4rem;
    font-weight: 500;
    color: black;
    border: 2px solid black;
    height: 36px;
    background-color: transparent;
    border-radius: 0;
    -moz-appearance: none;
    -webkit-appearance:none;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="black" viewBox="0 0 320 512" height="1.5rem" width="1.5rem" xmlns="http://www.w3.org/2000/svg"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg>');
    background-repeat: no-repeat;
    background-position: right 8px center;
  }
`

片段到运行此处：

.customselect{
  padding: 5px 45px 5px 10px;
  font-size: 1.2rem;
  line-height: 1.4rem;
  font-weight: 500;
  color: black;
  border: 2px solid black;
  height: 36px;
  background-color: transparent;
  border-radius: 0;
  -moz-appearance: none;
  -webkit-appearance:none;
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg fill="black" viewBox="0 0 320 512" height="1.5rem" width="1.5rem" xmlns="http://www.w3.org/2000/svg"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg>');
  background-repeat: no-repeat;
  background-position: right 8px center;
}

<select class="customselect">
  <option>Option A</option>
  <option>Option B</option>
  <option>Option C</option>
  <option>Option D</option>
</select>

React：只要页面大小调整为 iPad 或更小，插入符号图标就会一直移到下拉菜单之外

React: Caret icon keeps moving outside of dropdown menu whenever page is resized to iPad or smaller

css

css-position

reactjs

responsive

styled-components