如何在React中设置Fluent UI组件的子元素的样式？

在React中使用Fluent UI（现在称为Microsoft Fabric UI）时，可以通过几种方式为组件的子元素设置样式。以下是一些常见的方法：

1. 内联样式

你可以直接在JSX中使用内联样式来设置子元素的样式。

import { Button } from '@fluentui/react';

function App() {
  return (
    <Button>
      <span style={{ color: 'red', fontSize: '16px' }}>Click me!</span>
    </Button>
  );
}

2. CSS-in-JS库

使用CSS-in-JS库（如styled-components或emotion）可以为子元素创建可复用的样式组件。

import { Button } from '@fluentui/react';
import styled from 'styled-components';

const StyledSpan = styled.span`
  color: red;
  font-size: 16px;
`;

function App() {
  return (
    <Button>
      <StyledSpan>Click me!</StyledSpan>
    </Button>
  );
}

3. Fluent UI的样式API

Fluent UI提供了一套样式API，允许你通过props来定制组件的样式。

import { Button, mergeStyles } from '@fluentui/react';

const buttonStyles = {
  root: {
    backgroundColor: 'blue',
  },
  label: {
    color: 'white',
  },
};

function App() {
  return (
    <Button styles={buttonStyles}>
      Click me!
    </Button>
  );
}

4. 使用CSS模块

如果你使用CSS模块，可以在单独的CSS文件中定义样式，并在组件中导入和使用它们。

/* Button.module.css */
.buttonLabel {
  color: red;
  font-size: 16px;
}

import { Button } from '@fluentui/react';
import styles from './Button.module.css';

function App() {
  return (
    <Button>
      <span className={styles.buttonLabel}>Click me!</span>
    </Button>
  );
}