TypeScript Styling.getFocusStyle函數代碼示例

export const getStyles: IStyleFunction<IFeedbackListStyleProps, IFeedbackListStyles> = props => {
  const { theme = getTheme() } = props;
  const pivotStyles: Partial<IPivotStyles> = {
    root: [{ paddingTop: 20 }, globalClassNames.pivot]
  };
  return {
    issueList: [
      {
        maxHeight: 400,
        overflowY: 'auto'
      },
      globalClassNames.issueList
    ],
    button: [
      {
        marginBottom: 10,
        // Temporary workaround for https://github.com/OfficeDev/office-ui-fabric-react/issues/6782.
        selectors: {
          '&a:link, &a:hover, &a:focus, &a:visited': {
            color: theme.palette.white
          }
        }
      },
      globalClassNames.button
    ],
    itemCell: [
      getFocusStyle(theme, -1),
      {
        minHeight: 54,
        padding: 10,
        boxSizing: 'border-box',
        borderBottom: `1px solid ${theme.semanticColors.bodyDivider}`,
        display: 'flex',
        selectors: {
          '&:hover': { background: theme.palette.neutralLight }
        }
      }
    ],
    itemName: [
      theme.fonts.xLarge,
      {
        whiteSpace: 'nowrap',
        overflow: 'hidden',
        textOverflow: 'ellipsis'
      }
    ],
    itemLabel: [
      {
        fontSize: theme.fonts.medium.fontSize,
        fontWeight: FontWeights.bold
      },
      globalClassNames.listElement
    ],
    timeStamp: [{ fontSize: theme.fonts.medium.fontSize }, globalClassNames.timeStamp],
    subComponentStyles: {
      pivot: pivotStyles
    }
  };
};

export const CompoundButtonStyles = (props: IButtonProps): Partial<IButtonStyles> => {
  const { theme } = props;
  if (!theme) {
    throw new Error('Theme is undefined or null.');
  }
  const { palette, effects } = theme;

  return {
    root: {
      ...getFocusStyle(theme, 2),
      backgroundColor: palette.white,
      border: `1px solid ${palette.neutralSecondaryAlt}`,
      borderRadius: effects.roundedCorner2,
      padding: '16px 12px',

      // Primary styles require targeting a selector for now.
      // @todo: These selectors override the focus style above. Need to fix this.
      selectors: {
        '&.ms-Button--compoundPrimary': {
          backgroundColor: palette.themePrimary,
          borderColor: palette.themePrimary
        }
      }
    },
    rootPressed: {
      backgroundColor: palette.neutralQuaternaryAlt,

      // Primary styles require targeting a selector for now.
      selectors: {
        '&.ms-Button--compoundPrimary:active': {
          backgroundColor: palette.themeDark
        }
      }
    },
    rootChecked: {
      backgroundColor: palette.neutralQuaternaryAlt,

      // Primary styles require targeting a selector for now.
      selectors: {
        '&.ms-Button--compoundPrimary': {
          backgroundColor: palette.themeDark,
          borderColor: palette.themeDark
        }
      }
    },
    rootDisabled: {
      borderColor: palette.neutralLighter,

      selectors: {
        '&.ms-Button--compoundPrimary': {
          backgroundColor: palette.neutralLighter,
          borderColor: palette.neutralLighter
        }
      }
    }
  };
};

export const CommandBarButtonStyles = (props: IButtonProps): Partial<IButtonStyles> => {
  const { theme } = props;
  if (!theme) {
    throw new Error('Theme is undefined or null.');
  }

  return {
    root: {
      ...getFocusStyle(theme, 2)
    }
  };
};

//.........這裏部分代碼省略.........
      color: '#000000',
      verticalAlign: 'top'
    },
    navItemNameColumn: {
      width: '100%',
      marginLeft: isChildLinkSelected || (!hasChildren && isSelected && !(nestingLevel && nestingLevel > 0)) ? '8px' : '0px',
      lineHeight: !!nestingLevel && nestingLevel > 0 ? navChildItemHeight : navItemHeight,
      verticalAlign: 'top',
      display: 'inline-block',
      textOverflow: 'ellipsis',
      overflow: 'hidden',
      whiteSpace: 'nowrap',
      color: '#000000'
    },
    navSlimItemRoot: {
      selectors: {
        ':hover': {
          backgroundColor: hasChildren ? navItemWithChildBgColor : navItemHoverColor
        }
      }
    },
    navFloatingRoot: [
      {
        display: 'none',
        zIndex: 1901,
        position: 'absolute',
        marginLeft: navCollapsedWidth,
        marginTop: -navItemHeight - (!!scrollTop && scrollTop > 0 ? scrollTop : 0),
        width: navFloatingWidth,
        color: navTextColor,
        boxShadow: '0px 1.2px 3.6px rgba(0, 0, 0, 0.18), 0px 6.4px 14.4px rgba(0, 0, 0, 0.22)',
        backgroundColor: floatingNavBackgroundColor,
        opacity: '0.6',
        selectors: {
          [BackDropSelector]: {
            webkitBackdropFilter: 'blur(20px) saturate(125%)',
            backdropFilter: 'blur(20px) saturate(125%)',
            backgroundColor: 'rgba(255,255,255,.6)'
          },
          a: {
            width: '100%',
            backgroundColor: 'inherit'
          }
        }
      },
      AnimationClassNames.slideRightIn20
    ],
    navFloatingItemRoot: {
      height: !!nestingLevel && nestingLevel > 0 ? navChildItemHeight : navItemHeight,
      cursor: 'pointer',
      backgroundColor: !(nestingLevel && nestingLevel > 0) ? navItemHoverColor : floatingNavBackgroundColor,
      paddingLeft: navFloatingItemIndentSize,
      selectors: {
        ':hover': {
          backgroundColor: !!nestingLevel && nestingLevel > 0 ? navItemHoverColor : 'unset'
        },
        ':active': {
          backgroundColor: navItemSelectedColor
        }
      }
    },
    navGroupSeparatorRoot: {
      width: '100%',
      height: hasGroupName ? navGroupSeparatorWithGroupNameHeight : navGroupSeparatorItemHeight,
      textAlign: 'center'
    },
    navGroupSeparatorHrLine: {
      position: 'relative',
      height: '20px',
      borderBottom: `1px solid ${navItemWithChildBgColor}`
    },
    navGroupSeparatorHeaderGroupName: {
      position: 'absolute',
      marginTop: '40px',
      left: '16px',
      color: '#000000',
      fontWeight: 'bold'
    },
    navToggler: {
      height: navItemHeight,
      cursor: 'pointer',
      selectors: {
        ':hover': {
          backgroundColor: navItemHoverColor
        }
      },
      textAlign: 'left'
    },
    focusedStyle: [
      getFocusStyle(theme, undefined, undefined, undefined, 'transparent', undefined),
      {
        display: 'block',
        position: 'relative',
        height: !!nestingLevel && nestingLevel > 0 ? navChildItemHeight : navItemHeight,
        width: '100%',
        lineHeight: !!nestingLevel && nestingLevel > 0 ? navChildItemHeight : navItemHeight
      }
    ]
  };
};

export const DefaultButtonStyles = (props: IButtonProps): Partial<IButtonStyles> => {
  const { theme } = props;
  if (!theme) {
    throw new Error('Theme is undefined or null.');
  }
  const { palette, effects } = theme;

  return {
    root: {
      borderRadius: effects.roundedCorner2,
      backgroundColor: palette.white,
      border: `1px solid ${palette.neutralSecondaryAlt}`,
      ...getFocusStyle(theme, 1)
    },
    rootHovered: {
      backgroundColor: palette.neutralLighter,
      selectors: {
        '.ms-Button--primary': {
          backgroundColor: palette.themeDarkAlt
        }
      }
    },
    rootPressed: {
      backgroundColor: palette.neutralLight
    },
    rootChecked: {
      backgroundColor: palette.neutralLight
    },
    rootDisabled: {
      backgroundColor: palette.neutralLighter,
      borderColor: palette.neutralLighter
    },
    splitButtonMenuButton: {
      background: 'transparent',
      borderTopRightRadius: effects.roundedCorner2,
      borderBottomRightRadius: effects.roundedCorner2,
      border: `1px solid ${palette.neutralSecondaryAlt}`,
      borderLeft: 'none'
    },
    splitButtonContainer: {
      selectors: {
        '.ms-Button--default': {
          borderRight: 'none',
          borderTopRightRadius: '0',
          borderBottomRightRadius: '0'
        },
        '.ms-Button--primary': {
          borderTopRightRadius: '0',
          borderBottomRightRadius: '0',
          border: 'none',
          backgroundColor: palette.themePrimary,
          selectors: {
            ':hover': {
              background: palette.themeDarkAlt
            }
          }
        },
        '.ms-Button--primary + .ms-Button': {
          backgroundColor: palette.themePrimary,
          border: 'none',
          selectors: {
            ':hover': {
              background: palette.themeDarkAlt
            }
          }
        },
        '.ms-Button.is-disabled': {
          backgroundColor: palette.neutralLighter
        },
        '.ms-Button.is-disabled + .ms-Button.is-disabled': {
          backgroundColor: palette.neutralLighter,
          border: 'none'
        }
      }
    }
  };
};

import { fluentBorderRadius } from './styleConstants';
import { NeutralColors, CommunicationColors } from '../FluentColors';
import FluentTheme from '../FluentTheme';
import { getFocusStyle } from 'office-ui-fabric-react/lib/Styling';
import { IButtonStyles } from 'office-ui-fabric-react/lib/Button';

export const CompoundButtonStyles: Partial<IButtonStyles> = {
  root: {
    ...getFocusStyle(FluentTheme, 2),
    backgroundColor: NeutralColors.white,
    border: `1px solid ${NeutralColors.gray110}`,
    borderRadius: fluentBorderRadius,
    padding: '16px 12px',

    // Primary styles require targeting a selector for now.
    // @todo: These selectors override the focus style above. Need to fix this.
    selectors: {
      '&.ms-Button--compoundPrimary': {
        backgroundColor: CommunicationColors.primary,
        borderColor: CommunicationColors.primary
      }
    }
  },
  rootPressed: {
    backgroundColor: NeutralColors.gray40,

    // Primary styles require targeting a selector for now.
    selectors: {
      '&.ms-Button--compoundPrimary:active': {
        backgroundColor: CommunicationColors.shade20
      }

export const CommandBarButtonStyles = (props: IButtonProps): Partial<IButtonStyles> => {
  const { theme } = props;
  if (!theme) {
    throw new Error('Theme is undefined or null.');
  }
  const { palette, semanticColors } = theme;

  const BUTTON_ICON_CLASSNAME = '.ms-Button-Icon';

  return {
    root: [
      { ...getFocusStyle(theme, 2) },
      {
        backgroundColor: palette.white
      }
    ],

    rootHovered: {
      backgroundColor: palette.neutralLighter,
      selectors: {
        [BUTTON_ICON_CLASSNAME]: {
          color: palette.themeDarkAlt
        }
      }
    },

    rootPressed: {
      backgroundColor: palette.neutralLight,
      color: palette.neutralDark,
      selectors: {
        [BUTTON_ICON_CLASSNAME]: {
          color: palette.themeDark
        }
      }
    },

    rootChecked: {
      backgroundColor: palette.neutralLight,
      color: palette.neutralDark,
      selectors: {
        [BUTTON_ICON_CLASSNAME]: {
          color: palette.themeDark
        }
      }
    },

    rootExpanded: {
      color: palette.neutralDark,
      selectors: {
        [BUTTON_ICON_CLASSNAME]: {
          color: palette.themeDark
        }
      }
    },

    rootDisabled: {
      backgroundColor: palette.white,
      selectors: {
        [BUTTON_ICON_CLASSNAME]: {
          color: semanticColors.disabledBodySubtext
        }
      }
    },

    splitButtonMenuButton: {
      backgroundColor: palette.white,
      color: palette.neutralSecondary,
      selectors: {
        ':hover': {
          backgroundColor: palette.neutralLighter,
          selectors: {
            [BUTTON_ICON_CLASSNAME]: {
              color: palette.neutralPrimary
            }
          }
        },
        ':active': {
          backgroundColor: palette.neutralLight,
          selectors: {
            [BUTTON_ICON_CLASSNAME]: {
              color: palette.neutralPrimary
            }
          }
        }
      }
    },

    splitButtonMenuButtonDisabled: {
      backgroundColor: palette.white
    },

    icon: {
      color: palette.themePrimary
    }
  };
};

export const CommandBarButtonStyles = (theme: ITheme): Partial<IButtonStyles> => {
  const { semanticColors } = theme;

  return {
    icon: {
      color: semanticColors.focusBorder
    },
    menuIcon: {
      color: semanticColors.bodyText
    },
    root: {
      ...getFocusStyle(theme, 2),
      fontSize: FontSizes.size12,
      backgroundColor: semanticColors.bodyBackground,
      color: semanticColors.bodyText
    },
    rootExpanded: {
      backgroundColor: semanticColors.menuItemBackgroundHovered,
      color: semanticColors.bodyText
    },
    rootHovered: {
      backgroundColor: semanticColors.menuItemBackgroundHovered,
      color: semanticColors.bodyText
    },
    rootPressed: {
      backgroundColor: semanticColors.menuItemBackgroundPressed,
      color: semanticColors.bodyText
    },
    rootChecked: {
      backgroundColor: semanticColors.listItemBackgroundChecked,
      color: semanticColors.bodyText
    },
    rootDisabled: {
      backgroundColor: semanticColors.bodyBackground,
      color: semanticColors.disabledBodyText
    },
    splitButtonMenuButton: {
      backgroundColor: semanticColors.bodyBackground,
      selectors: {
        ':hover': {
          backgroundColor: semanticColors.menuItemBackgroundHovered
        }
      }
    },
    splitButtonMenuButtonChecked: {
      backgroundColor: semanticColors.bodyBackground,
      selectors: {
        ':hover': {
          backgroundColor: semanticColors.menuItemBackgroundHovered
        }
      }
    },
    splitButtonMenuButtonDisabled: {
      backgroundColor: semanticColors.bodyBackground
    },
    splitButtonMenuButtonExpanded: {
      backgroundColor: semanticColors.bodyBackground,
      selectors: {
        ':hover': {
          backgroundColor: semanticColors.menuItemBackgroundHovered
        }
      }
    },
    splitButtonMenuIcon: {
      color: semanticColors.bodyText
    }
  };
};

export const getListRowFocusStyles = (): IStyleFunctionOrObject<IDetailsRowStyleProps, IDetailsRowStyles> => {
  return {
    root: [getFocusStyle(theme, undefined, undefined, undefined, 'transparent', undefined)]
  };
};