在 React 中自定義語義 UI

Question

我在下面提到鏈接這是反應中的語義 UI，我想刪除側邊菜單和選項卡內容語義 UI 沙箱鏈接之間的空格： https://z3omnz.csb.app/

當前外觀：

想要這種類型：

Answer 1

使用基本的 CSS，但您甚至可以使用樣式組件等。

在Tab中添加一個class的名字，同時導入一個CSS的文件。 如下所示 -

import React from 'react'
import { Tab } from 'semantic-ui-react'
import "./tabStyle.css"

const panes = [
  { menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },
  { menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },
  { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },
]

const TabExampleMenuPositionRight = () => (
  <Tab
    menu={{ fluid: true, vertical: true }}
    menuPosition='right'
    panes={panes}
    className="styledTab"
  />
)

export default TabExampleMenuPositionRight

並在 tabStyle.css 中使用此代碼，該代碼將針對由 semantic-ui-react 創建的選項卡窗格 -

.styledTab .ui.grid>.column:not(.row) {
  padding-right: 0px !important;
  padding-left: 0px !important;
}