TypeScript Styling.getTheme函數代碼示例

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 getStyles: IStyleFunction<IPropertiesTableSetStyleProps, IPropertiesTableSetStyles> = props => {
  const { theme = getTheme() } = props;
  return {
    tableRoot: [
      {
        marginBottom: 20,
        overflowX: 'auto',
        overflowY: 'inherit'
      },
      'PropertiesTable'
    ],
    tableHeader: theme.fonts.xLarge
  };
};

  describe('parseGap', () => {
    loadTheme({
      spacing: {
        m: '16em'
      }
    });
    const theme = getTheme();

    it('returns a default value when given undefined', () => {
      expect(parseGap(undefined, theme)).toEqual({ value: 0, unit: 'px' });
    });

    it('returns a default value when given am empty string', () => {
      expect(parseGap('', theme)).toEqual({ value: 0, unit: 'px' });
    });

    it('returns a value with px when given a number', () => {
      expect(parseGap(10, theme)).toEqual({ value: 10, unit: 'px' });
    });

    it('can parse a string with px', () => {
      expect(parseGap('32px', theme)).toEqual({ value: 32, unit: 'px' });
    });

    it('can parse a string with a float', () => {
      expect(parseGap('20.5px', theme)).toEqual({ value: 20.5, unit: 'px' });
    });

    it('can parse a string with em', () => {
      expect(parseGap('5em', theme)).toEqual({ value: 5, unit: 'em' });
    });

    it('can parse a string with percentage', () => {
      expect(parseGap('100%', theme)).toEqual({ value: 100, unit: '%' });
    });

    it('can parse a string with no numerical part', () => {
      expect(parseGap('px', theme)).toEqual({ value: 0, unit: 'px' });
    });

    it('defaults to px with given a string with no units', () => {
      expect(parseGap('16', theme)).toEqual({ value: 16, unit: 'px' });
    });

    it('parses the value from the theme when given a spacing key', () => {
      expect(parseGap('m', theme)).toEqual({ value: 16, unit: 'em' });
    });
  });

export const getStyles: IStyleFunction<IComponentPageStyleProps, IComponentPageStyles> = props => {
  const { theme = getTheme(), componentStatus } = props;
  return {
    body: globalClassNames.body,
    root: [
      {
        backgroundColor: theme.palette.white,
        overflow: 'hidden'
      },
      globalClassNames.root
    ],
    header: [
      {
        backgroundColor: componentPageColor,
        minHeight: 245,
        padding: componentPagePadding,
        paddingBottom: 0
      },
      globalClassNames.header
    ],
    headerLink: [
      theme.fonts.large,
      {
        color: theme.palette.white,
        textDecoration: 'none',
        selectors: { '&:hover': { color: theme.palette.neutralLight } }
      },
      globalClassNames.headerLink
    ],
    title: [
      theme.fonts.xxLarge,
      {
        fontSize: 82,
        lineHeight: 94,
        color: theme.palette.white,
        display: 'inline-block',
        width: '100%',
        marginTop: componentPagePadding,
        marginBottom: componentPagePadding
      },
      globalClassNames.title
    ],
    navigation: globalClassNames.navigation,
    subHeading: [
      {
        // Set margins on the heading container not heading text to fix vertical alignment on sections
        // with an edit button
        marginTop: 0,
        marginBottom: 24,
        selectors: {
          // Set font here to be more specific
          h2: [theme.fonts.xxLarge, { fontSize: 36, margin: 0 }]
        }
      },
      globalClassNames.subHeading
    ],
    section: {
      padding: componentPagePadding
    },
    overviewSection: [
      {
        maxWidth: '60em'
      },
      !!componentStatus && { paddingTop: 15 },
      globalClassNames.overviewSection
    ],
    overviewText: [
      {
        fontSize: theme.fonts.medium.fontSize,
        // This is meant to be a ratio, so it has to be in quotes so it's not interpreted as pixels
        lineHeight: '1.5',
        marginBottom: -6, // Trim padding off last paragraph
        selectors: {
          p: {
            margin: 0,
            padding: '16px 0'
          },
          ul: { paddingLeft: ulLeftPadding },
          li: [
            theme.fonts.medium,
            {
              marginBottom: 16
            }
          ],
          'ul li': { listStyle: 'disc' }
        }
      },
      globalClassNames.overviewText
    ],
    overviewHeading: [
      {
        selectors: {
          [`&.${globalClassNames.subHeading}`]: {
            marginTop: 0
          }
        }
      },
      globalClassNames.overviewHeading
    ],
    // These are for the actual "Best Practices" heading/text (rarely shown).
//.........這裏部分代碼省略.........

export const getStyles: IStyleFunction<IAppStyleProps, IAppStyles> = props => {
  const { responsiveMode, theme = getTheme() } = props;
  const isLargeDown = responsiveMode <= ResponsiveMode.large;
  return {
    root: [
      {
        selectors: {
          ':global(body)': {
            padding: 0,
            margin: 0,
            position: 'absolute',
            left: 0,
            top: 0,
            minWidth: '100%',
            minHeight: '100%',
            '-webkit-tap-highlight-color': 'transparent'
          }
        }
      },
      globalClassNames.root
    ],
    headerContainer: [
      {
        position: 'absolute',
        top: 0,
        height: headerHeight,
        left: 0,
        right: 0
      },
      globalClassNames.header
    ],
    leftNavContainer: [
      {
        position: 'absolute',
        left: 0,
        width: navWidth,
        top: headerHeight,
        bottom: 0,
        borderRight: `1px solid ${theme.palette.neutralLight}`,
        background: theme.palette.white,
        boxSizing: 'border-box',
        overflowX: 'hidden',
        overflowY: 'auto',
        WebkitOverflowScrolling: 'touch'
      },
      globalClassNames.leftNav
    ],
    content: [
      {
        position: 'absolute',
        left: isLargeDown ? 0 : navWidth,
        right: 0,
        top: headerHeight,
        bottom: 0,
        padding: isLargeDown ? 5 : undefined,
        overflowX: 'auto',
        overflowY: 'auto',
        // Helps to enable hardware acceleration and improve painting performance.
        transform: 'translateZ(0)',
        // Helps to enable smooth scrolling on ios devices.
        WebkitOverflowScrolling: 'touch'
      },
      globalClassNames.content
    ],
    linkFlair: [
      {
        fontSize: 10,
        textTransform: 'upppercase',
        float: 'right',
        background: theme.palette.neutralTertiaryAlt,
        color: theme.palette.white,
        lineHeight: 'normal',
        display: 'inline',
        verticalAlign: 'middle',
        transform: 'translateY(-50%)',
        position: 'absolute',
        right: 20,
        top: '50%',
        padding: '2px 6px',
        borderRadius: 2
      },
      globalClassNames.linkFlair
    ],
    linkFlairStarted: [
      {
        background: theme.palette.yellowLight,
        color: theme.palette.black
      },
      globalClassNames.linkFlairStarted
    ],
    linkFlairBeta: [
      {
        background: theme.palette.greenLight
      },
      globalClassNames.linkFlairBeta
    ],
    linkFlairRelease: [
      {
        background: theme.palette.green
      },
//.........這裏部分代碼省略.........

export const getStyles: IStyleFunction<IExampleCardStyleProps, IExampleCardStyles> = props => {
  const { isRightAligned, isScrollable, isCodeVisible, theme = getTheme() } = props;

  const sharedToggleButtonStyles = {
    marginRight: 0,
    background: 'none',
    backgroundColor: 'transparent',
    border: `1px solid ${theme.palette.neutralTertiary}`,
    borderBottom: 0,
    borderTopLeftRadius: '4px',
    borderTopRightRadius: '4px',
    padding: '4px 12px',
    minWidth: 100,
    transition: `border ${AnimationVariables.durationValue3} ${AnimationVariables.easeFunction1}`
  };

  const codeButtonActiveStyles: IRawStyle = {
    backgroundColor: theme.palette.neutralDark,
    borderColor: theme.palette.neutralDark,
    selectors: {
      '.ms-Button-icon, .ms-Button-label': {
        color: theme.palette.white
      }
    }
  };

  const dropdownStyles: Partial<IDropdownStyles> = {
    caretDownWrapper: {
      top: '6px'
    },
    title: [
      sharedToggleButtonStyles,
      {
        alignItems: 'center',
        display: 'flex',
        height: 40,
        width: 150,
        selectors: {
          [`&.${globalClassNames.themeDropdown}:focus`]: {
            borderColor: theme.palette.neutralDark,
            outlineColor: theme.palette.neutralDark
          }
        }
      },
      globalClassNames.themeDropdown
    ]
  };

  const buttonStyles: Partial<IButtonStyles> = {
    root: [
      sharedToggleButtonStyles,
      {
        // This is meant to be a ratio, so it has to be in quotes so it's not interpreted as pixels
        lineHeight: '1',
        selectors: {
          '&:hover': codeButtonActiveStyles
        }
      },
      globalClassNames.codeButton,
      isCodeVisible && [codeButtonActiveStyles, globalClassNames.isActive]
    ],
    label: {
      color: theme.palette.neutralDark,
      borderColor: theme.palette.neutralDark
    }
  };

  return {
    root: [
      {
        margin: '20px 0'
      },
      globalClassNames.root,
      isCodeVisible && globalClassNames.isCodeVisible
    ],
    header: [
      {
        borderBottom: `1px solid ${theme.palette.neutralTertiary}`,
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
        position: 'relative'
      },
      isCodeVisible && {
        borderColor: theme.palette.neutralDark
      },
      globalClassNames.header
    ],
    title: [
      theme.fonts.large,
      {
        marginBottom: 10,
        display: 'inline-block'
      },
      globalClassNames.title
    ],
    toggleButtons: [
      theme.fonts.large,
      {
        display: 'flex',
//.........這裏部分代碼省略.........

  describe('parseGap', () => {
    loadTheme({
      spacing: {
        m: '16em'
      }
    });
    const theme = getTheme();

    it('returns a default value when given undefined', () => {
      expect(parseGap(undefined, theme)).toEqual({ rowGap: { value: 0, unit: 'px' }, columnGap: { value: 0, unit: 'px' } });
    });

    it('returns a default value when given an empty string', () => {
      expect(parseGap('', theme)).toEqual({ rowGap: { value: 0, unit: 'px' }, columnGap: { value: 0, unit: 'px' } });
    });

    it('returns a value with px when given a number', () => {
      expect(parseGap(10, theme)).toEqual({ rowGap: { value: 10, unit: 'px' }, columnGap: { value: 10, unit: 'px' } });
    });

    it('can parse a string with px', () => {
      expect(parseGap('32px', theme)).toEqual({ rowGap: { value: 32, unit: 'px' }, columnGap: { value: 32, unit: 'px' } });
    });

    it('can parse a string with a float', () => {
      expect(parseGap('20.5px', theme)).toEqual({ rowGap: { value: 20.5, unit: 'px' }, columnGap: { value: 20.5, unit: 'px' } });
    });

    it('can parse a string with em', () => {
      expect(parseGap('5em', theme)).toEqual({ rowGap: { value: 5, unit: 'em' }, columnGap: { value: 5, unit: 'em' } });
    });

    it('can parse a string with percentage', () => {
      expect(parseGap('100%', theme)).toEqual({ rowGap: { value: 100, unit: '%' }, columnGap: { value: 100, unit: '%' } });
    });

    it('can parse a string with no numerical part', () => {
      expect(parseGap('px', theme)).toEqual({ rowGap: { value: 0, unit: 'px' }, columnGap: { value: 0, unit: 'px' } });
    });

    it('defaults to px with given a string with no units', () => {
      expect(parseGap('16', theme)).toEqual({ rowGap: { value: 16, unit: 'px' }, columnGap: { value: 16, unit: 'px' } });
    });

    it('parses the value from the theme when given a spacing key', () => {
      expect(parseGap('m', theme)).toEqual({ rowGap: { value: 16, unit: 'em' }, columnGap: { value: 16, unit: 'em' } });
    });

    it('can parse a string with both horizontal and vertical gap', () => {
      expect(parseGap('30px 10px', theme)).toEqual({ rowGap: { value: 30, unit: 'px' }, columnGap: { value: 10, unit: 'px' } });
    });

    it('can parse a string with horizontal and vertical gap with different units', () => {
      expect(parseGap('50px 15%', theme)).toEqual({ rowGap: { value: 50, unit: 'px' }, columnGap: { value: 15, unit: '%' } });
    });
    it('defaults to px with a string with horizontal and vertical gap with no units', () => {
      expect(parseGap('50 30', theme)).toEqual({ rowGap: { value: 50, unit: 'px' }, columnGap: { value: 30, unit: 'px' } });
    });

    it('can parse a string with horizontal and vertical gap with one of them getting value from the theme when given a spacing key', () => {
      expect(parseGap('50px m', theme)).toEqual({ rowGap: { value: 50, unit: 'px' }, columnGap: { value: 16, unit: 'em' } });
    });
  });

import { IDetailsRowStyleProps, IDetailsRowStyles } from 'office-ui-fabric-react/lib/DetailsList';
import { DefaultPalette, FontSizes, getFocusStyle, getTheme, IStyle } from 'office-ui-fabric-react/lib/Styling';
import { IStyleFunctionOrObject } from 'office-ui-fabric-react/lib/Utilities';

const theme = getTheme();
const listRowActionButtonWidth = 36;
const listRowActionButtonMargin = -10;

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

export const getfocusStyle = (): IStyle => {
  return [getFocusStyle(theme, undefined, undefined, undefined, 'transparent', undefined)];
};

export const getListActionColumnStyle = (isCompactMode: boolean): IStyle => {
  return {
    display: 'flex',
    fontSize: isCompactMode ? FontSizes.small : FontSizes.medium,
    color: DefaultPalette.neutralDark,
    textOverflow: 'ellipsis',
    maxWidth: '100%',
    justifyContent: 'space-between'
  };
};

export const getListActionFieldStyle = (isCompactMode: boolean): IStyle => {
  return {

export const getStyles: IStyleFunction<IHeaderStyleProps, IHeaderStyles> = props => {
  const { theme = getTheme(), isLargeDown } = props;

  const commonStyles: IRawStyle = {
    display: 'inline-block',
    verticalAlign: 'top',
    color: theme.palette.white,
    borderRadius: 0
  };

  const iconStyles: IIconStyles = { root: { fontSize: 18 } };

  return {
    root: [
      {
        height: 50,
        lineHeight: 50,
        padding: isLargeDown ? 0 : '0 20px',
        backgroundColor: '#272630',
        overflow: 'hidden',
        whiteSpace: 'no-wrap',
        userSelect: 'none',
        color: 'white'
      },
      globalClassNames.root
    ],
    title: [
      commonStyles,
      theme.fonts.large,
      {
        lineHeight: 48
      },
      globalClassNames.title
    ],
    button: [
      commonStyles,
      getFocusStyle(theme, 1, 'relative', undefined, theme.palette.themeLight, 'transparent'),
      {
        position: 'relative',
        textDecoration: 'none',
        background: 'none',
        backgroundColor: 'transparent',
        border: 'none',
        padding: '0 10px',
        minWidth: 50,
        lineHeight: 50,
        margin: isLargeDown ? 0 : '0 5px',
        textTransform: 'uppercase',
        display: 'inline-block',
        verticalAlign: 'top',
        boxSizing: 'border-box',
        selectors: {
          '&:hover': {
            background: isLargeDown ? 'inherit' : theme.palette.themePrimary
          }
        }
      },
      globalClassNames.button
    ],
    buttons: [
      commonStyles,
      {
        float: 'right'
      },
      globalClassNames.buttons
    ],
    subComponentStyles: {
      icons: iconStyles
    }
  };
};