在 React 中自定义语义 UI答案

【问题标题】：Customizes Semantic UI in react在 React 中自定义语义 UI
【发布时间】：2022-12-10 13:56:08
【问题描述】：

我在下面提到链接这是反应中的语义 UI，我想删除侧边菜单和选项卡内容之间的空格语义 UI 沙盒链接：https://z3omnz.csb.app/

当前外观：

想要这种类型：

【问题讨论】：

@mhhabib 你知道怎么做吗？

标签： css reactjs semantic-ui

【解决方案1】：

使用基本的 CSS，但你甚至可以使用样式组件等。

在 Tab 中添加一个类名，同时导入一个 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;
}

【讨论】：