css - CSS 样式：如何在 React 中重新创建 iOS 14 段控件？

Question

我正在尝试在 React 中重新创建 iOS 14 段控制，但分隔线有问题。如何使所选选项卡旁边的分隔线消失？

我尝试扩展填充和边距以覆盖线条，但第一个和最后一个元素太宽的问题。

CSS大神能帮帮我吗？

图片（到目前为止我所拥有的）：

图片（它应该是什么样子）：

网络示例

https://laurasandoval.github.io/iOS13SegmentedControl/

SegmentedControlYears.tsx

// Imports: Dependencies
import React, { useEffect, useState } from 'react';

// Imports: TypeScript Types
import { SegmentedControlTabsYears } from '../types/types';

// TypeScript Type: Props
interface Props {
  tabs: Array<SegmentedControlTabsYears>,
  onSelection: (value: SegmentedControlTabsYears) => void,
};

// Component: Segmented Control (Years)
const SegmentedControlYears: React.FC<Props> = (props) => {
  // React Hooks: State
  const [ value, setValue ] = useState<SegmentedControlTabsYears>('2021');

  // Set Initial Tab
  useEffect(() => {
    // Set Data
    setValue(props.tabs[0] as SegmentedControlTabsYears);
  }, []);

  // Render Segment Tab Small Container Class Name
  const renderSegmentTabSmallContainerClassName = (tab: SegmentedControlTabsYears) => {
    // Selected Tab
    if (tab === value) {
      return 'segment-tab-years-container-selected';
    }
    // Unselected Tabs
    else {
      return 'segment-tab-years-container';
    }
  };

  return (
    <div id="segmented-control-years-container">
      <div id="segmented-control-years-track-container">
        <button className={renderSegmentTabSmallContainerClassName(tab)} onClick={() => setValue(tab)}>
          <p className=segment-tab-years-text">{tab}</p>
        </button>
      </div>
    </div>
  );
};

// Exports
export default SegmentedControlYears;

SegmentedControlYears.css

#segmented-control-years-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 16px;
    margin-bottom: 16px;
}

#segmented-control-years-track-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 30px;
    background-color: #272729;
    border-radius: 7px;
}

.segment-tab-years-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 16px;
    width: 75px;
    background-color: transparent;
    border: none;
    border-right: 1px solid #646368;
}

.segment-tab-years-container:last-child {
    background-color: transparent;
    border: none;
}

.segment-tab-years-container-selected{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 75px;
    background-color: #646368;
    border: none;
    border: 3px solid #272729;
    border-radius: 7px;
}

.segment-tab-years-text{
    font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .4px;
    color: #FFFFFF;
    text-decoration: none;
    margin: 0;
    padding: 20px;
    cursor: pointer;
}

标签： cssreactjsreact-hooksstyling