1

how do we override the styles and provide the space between the content and wrapper, as show in the attachment

tried to add styles

const myTheme: ThemeInput = {
   componentStyles: {
    Menu: {
      root: {
        color: "yellow",
        //tried to provide maring space but it is taking for whole menu, rather menuitem content 
      },
    }
  }
 };
umgolla
  • 39
  • 8
  • Could you please elaborate on space between "content and wrapper"? Please share some screenshot with highlights in it? – ChetanSharma-msft Feb 16 '22 at 06:02
  • https://fluentsite.z22.web.core.windows.net/0.60.1/components/menu/definition in the provide link we have menu with Underlined i want to make look like the above image i have attached – umgolla Feb 16 '22 at 06:46
  • Do you want to remove the underline or want to increase the space? Could you please try as below: import React, { Component } from "react"; import styled from "styled-components"; export default class MyLabel extends Component { render() { return ; } } const StyledMyLabel = styled(MyLabel)` color: green; `; – Prasad-MSFT Feb 16 '22 at 15:05
  • i want to increase the space – umgolla Feb 17 '22 at 06:39
  • You can use custom css for this. You need to override below class by inspecting `Editorials – Prasad-MSFT Feb 22 '22 at 07:59
  • thanks you, it works, i would like to know, if any standard way of doing it apart from this – umgolla Feb 23 '22 at 13:14
  • No there doesn't seem to be any other way – Prasad-MSFT Feb 24 '22 at 09:01

2 Answers2

0

I did the following. There is still some slight jumping which I think is coming from the MenuItemWrapper. You could play around with the numbers and see if you can get the desired size. The docs are really not clear and I don't know if this approach will be removed in later versions.

<Menu underlined primary defaultActiveIndex={0} styles={{ border: 0 }}
    items={[
        {
            key: "itemOne",
            content: "ItemOne",
            styles: ({ props }) => {
                return {
                    paddingBottom: 5,
                    marginBottom: props.active ? 0 : 5,
                    ":hover": {
                        marginBottom: 0,
                        paddingBottom: 5
                    }
                };
            }
        },
        // ...other items 
    ]}
/>
Ghojzilla
  • 311
  • 1
  • 14
-1

You can use custom css for this. You need to override below class by inspecting

<span class="ui-menu__itemcontent of og oh oi bz gx" dir="auto">Editorials</span

as follow:

 .oi {
     margin-bottom: 0.7143rem;
   }

.

Prasad-MSFT
  • 660
  • 1
  • 3
  • 7