javascript - css - 如何处理选项卡中的折叠边框

Question

我正在创建一个选项卡。
当我切换选项卡时，事件元素将有黑色边框，而非事件元素将有灰色边框。
但我发现所有 2 个元素的边框重叠，如下所示

重叠边框应仅为黑色。
如何解决？
应用程序.js

import "./styles.css";

import Tab from "./Tab";

import { useState } from "react";

const options = [
  { id: "1", label: "First" },
  { id: "2", label: "Second" }
];

export default function App() {
  const [selectedOption, setSelectedOption] = useState("");
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Tab
        options={options}
        selectedOption={selectedOption}
        setSelectedOption={setSelectedOption}
      />
    </div>
  );
}

Tab.jsx

import React from "react";

import "./styles.css";

function Tab(props) {
  const { options, selectedOption, setSelectedOption } = props;
  return (
    <div className="tab">
      {options &&
        options.map((option) => {
          return (
            <div
              className={
                "tab__item " +
                (selectedOption === option.id ? "tab__item--active" : "")
              }
              key={option.id}
              onClick={() => {
                setSelectedOption(option.id);
              }}
            >
              {option.label}
            </div>
          );
        })}
    </div>
  );
}

export default Tab;

样式文件

.App {
  font-family: sans-serif;
  text-align: center;
}

.tab {
  display: flex;
}
.tab .tab__item {
  flex: 1 1 0;
  border: 1px solid #c3c4c7;
  padding: 0.1rem 0.2rem;
}

.tab .tab__item--active {
  border: 1px solid #3c434a;
}

.tab .tab__item:hover {
  cursor: pointer;
}

https://codesandbox.io/s/blissful-sound-t312f?file=/src/App.js

Answer 1

要解决这个问题，您只需要操作 css 边框属性即可。在这种情况下 border-left和 border-right . working example
CSS

.tab {
  display: flex;
}
.tab .tab__item {
  flex: 1 1 0;
  border: none;
  border-top: 1px solid #c3c4c7;
  border-bottom: 1px solid #c3c4c7;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  padding: 0.1rem 0.2rem;
}

.tab__item:first-child {
  border-left: 1px solid #c3c4c7;
}

.tab__item:last-child {
  border-left: 1px solid #c3c4c7;
  border-right: 1px solid #c3c4c7;
}

.tab__item--active:first-child {
  border: 1px solid #3c434a;
}
.tab__item--active:first-child ~ .tab__item:last-child {
  border-left: 1px solid transparent;
}

.tab__item--active:last-child {
  border: 1px solid #3c434a;
}

.tab .tab__item:hover {
  cursor: pointer;
}