Componentes de estilo com temas modernos

Os desenvolvedores precisam ser capazes de estilizar seus componentes para que eles se pareçam com o restante do aplicativo em que estão incluídos. Eles podem fazer isso quando o tema moderno estiver habilitado em um aplicativo de tela (por meio do recurso Controles e temas modernos) ou em um aplicativo baseado em modelo (por meio do novo visual atualizado). Use temas modernos, baseados em Fluent UI React v9, para estilizar o seu componente. Essa abordagem é recomendada para obter o melhor desempenho e experiência de temas para seu componente.

Há quatro maneiras diferentes de aplicar temas modernos ao seu componente.

Controles do Fluent UI v9

Encapsular controles do Fluent UI v9 em um componente é a maneira mais fácil de utilizar a tematização moderna, já que o tema moderno é aplicado automaticamente a esses controles. O único requisito prévio é garantir que seu componente adicione uma dependência das bibliotecas da plataforma e dos controles do React, conforme mostrado abaixo. Essa abordagem permite que seu componente use as mesmas bibliotecas React e Fluent que a plataforma e, portanto, compartilhe o mesmo contexto React que passa os tokens de tema para o componente.

<resources>
  <code path="index.ts" order="1"/>
  <!-- Dependency on React controls & platform libraries -->
  <platform-library name="React" version="16.14.0" />
  <platform-library name="Fluent" version="9.46.2" />
</resources>

Controles do Fluent UI v8

O Fluent oferece um caminho de migração para aplicar estruturas de tema da v9 quando você usa controles do Fluent UI v8 no seu componente. Use a createV8Theme função incluída no pacote de migração v8 para v9 do Fluent para criar um tema v8 com base em tokens de tema v9, conforme mostrado no exemplo a seguir:

const theme = createV8Theme(
  context.fluentDesignLanguage.brand,
  context.fluentDesignLanguage.theme
);
return <ThemeProvider theme={theme}></ThemeProvider>;

Controles que não são do Fluent UI

Se o seu componente não usar o Fluent UI, você poderá depender diretamente dos tokens de tema v9 disponíveis por meio do parâmetro de contexto fluentDesignLanguage. Use este parâmetro para obter acesso a todos os tokens do tema, para que possa fazer referência a qualquer aspecto do tema para definir seu próprio estilo.

<span style={{ fontSize: context.fluentDesignLanguage.theme.fontSizeBase300 }}>
  {"Stylizing HTML with platform provided theme."}
</span>

Provedores de temas personalizados

Quando o componente exigir um estilo diferente do tema atual do aplicativo, crie seu próprio FluentProvider e passe seu próprio conjunto de tokens de tema para ser usado pelo componente.

<FluentProvider theme={context.fluentDesignLanguage.tokenTheme}>
  {/* your control */}
</FluentProvider>

Controles de exemplo

Exemplos para cada um desses casos de uso estão disponíveis em controle da API Modern Theming.

perguntas frequentes

Esta seção contém perguntas frequentes. Se você tiver alguma dúvida sobre esse recurso, use o botão Feedback de Esta página, na parte inferior da página, para criar um problema no GitHub.

Q: Meu controle usa o Fluent UI v9 e tem uma dependência das bibliotecas da plataforma, mas não quero usar a tematização moderna. Como posso desabilitá-lo para o meu componente?

R: Você pode fazer isso de duas maneiras diferentes:

  1. Você pode criar seu próprio nível de componente FluentProvider

    <FluentProvider theme={customFluentV9Theme}>
  {/* your control */}
</FluentProvider>

  2. Você pode encapsular seu controle dentro IdPrefixContext.Provider e definir seu próprio idPrefix valor. Isso impede que seu componente receba tokens de tema da plataforma.

    <IdPrefixProvider value="custom-control-prefix">
  <Label weight="semibold">This label is not getting Modern Theming</Label>
</IdPrefixProvider>

P: Alguns dos meus controles v9 do Fluent UI não estão recebendo estilos

A: Os controles do Fluent v9 que dependem do React Portal precisam ser encapsulados novamente no provedor de tema para garantir que os estilos sejam aplicados corretamente. Você pode usar FluentProvider.

P: Como posso verificar se o tema moderno está habilitado

A: Você pode verificar se os tokens estão disponíveis: context.fluentDesignLanguage?.tokenTheme. Ou em aplicativos controlados por modelo, você pode verificar as configurações do aplicativo: context.appSettings.getIsFluentThemingEnabled().

Temas (referência da API da estrutura de componentes do Power Apps)
Controle da API moderna de tematização
Usar temas modernos em aplicativos de tela (versão prévia)

  • Last updated on