reactjs - 突出显示导航 Pane 的选定项目

Question

请参阅 https://developer.microsoft.com/en-us/fabric#/controls/web/nav 下的示例“带嵌套链接的导航” , 单击导航项时，我想突出显示此项。我已将 url 设置为 ' '，以便单击某个项目不会执行任何操作。但是，我希望该项目在点击时突出显示。我该怎么做呢？ 任何指针都会有所帮助。

import * as React from 'react';
import { Nav,INavStyles } from 'office-ui-fabric-react/lib/Nav';
import { initializeIcons } from '@uifabric/icons';
initializeIcons();

    const navStyles: INavStyles = {
  root:{
      boxSizing: 'border-box',
      border: '1px solid lightgrey',
      overflowY: 'auto',
      height: 300
  },
  chevronButton: {
      height: 30
  },
  chevronIcon:{
      height: 30,
      lineHeight: 30
  },
  compositeLink: {}, 
  group:{}, 
  groupContent: {},
  link: {},
  linkText:{},
  navItem:{}, 
  navItems:{
    margin: 0
  },
};

export const NavNestedExample1: React.FunctionComponent = () => {
  return (
    <Nav
      styles={navStyles}
      ariaLabel="Nav example with nested links"
      groups={[
        {
          links: [
            {
              name: 'Parent link 1',
              url: '',
              target: '_blank',
              expandAriaLabel: 'Expand Parent link 1',
              collapseAriaLabel: 'Collapse Parent link 1',
              links: [
                {
                  name: 'Child link 1',
                  url: '',
                  target: '_blank'
                },
                {
                  name: 'Child link 2',
                  url: '',
                  target: '_blank',
                  expandAriaLabel: 'Expand Child link 2',
                  collapseAriaLabel: 'Collapse Child link 2',
                  links: [
                    {
                      name: '3rd level link 1',
                      url: '',
                      target: '_blank'
                    },
                    {
                      name: '3rd level link 2',
                      url: '',
                      target: '_blank'
                    }
                  ]
                },
                {
                  name: 'Child link 3',
                  url: '',
                  target: '_blank'
                }
              ]
            },
            {
              name: 'Parent link 2',
              url: '',
              target: '_blank',
              expandAriaLabel: 'Expand Parent link 2',
              collapseAriaLabel: 'Collapse Parent link 2',
              links: [
                {
                  name: 'Child link 4',
                  url: '',
                  target: '_blank'
                }
              ]
            }
          ]
        }
      ]}
    />
  );
};

Answer 1

使用 className 属性将额外的 CSS 类应用于导航，INavProps interface

export const App: React.FunctionComponent = () => {
  return (
    <Nav
      className='nav' //here
      ariaLabel="Nav example with nested links"
      groups={[
            ....

 //App.css
    .nav :focus{ 
      color: brown;
      background-color: darksalmon ;
    }
   .nav :hover{ 
      color: .....;
      background-color: ......;
    }
   .nav :active{ 
      color: .....;
      background-color: ......;
    }

使用 INavStyles 和 选择器

const navStyles: INavStyles = {
  root: {
    boxSizing: 'border-box',
    border: '1px solid lightgrey',
    overflowY: 'auto',
    height: 300
  },
  linkText: {
    color: 'green',
    selectors: { '&:hover': { color: 'red' } }
  },
compositeLink: {
   selectors: {
      '&:active ,&:focus-within': { backgroundColor: 'orange' }
    }
  },
...