Search code examples
cssreactjssemantic-ui

Customizes Semantic UI in react

I am mentioning link below This is semantic UI in react and i want to remove spaces between side menu and Tab Content Semantic UI sandbox link: https://z3omnz.csb.app/

Current Look: enter image description here

Want to this type: enter image description here

Solution

  • Used basic CSS, but you can even use styled-components, etc.

    Add a class name to Tab and also import a CSS file. As done below -

    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

    And in tabStyle.css use this code which will target the tab panes created by semantic-ui-react -

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