reactjs 自定义React中的语义UI

cqoc49vn  于 2022-12-12  发布在  React
关注(0)|答案(1)|浏览(184)

我在下面提到的链接这是语义UI在React,我想删除侧菜单和标签内容语义UI沙箱链接之间的空格:https://z3omnz.csb.app/
当前外观:

想此式:

ttp71kqs

ttp71kqs1#

使用基本的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;
}

相关问题