Stack Overflow
Stack Overflow

Questions tagged [fluentui-react]

Fluent UI react or web represents a collection of utilities, React components, and web components for building web applications. A collection of UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior. Home: https://developer.microsoft.com/en-us/fluentui#/ Source: https://github.com/microsoft/fluent-ui-react

Fluent UI react or web represents a collection of utilities, React components, and web components for building web applications. A collection of UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior.

Home: https://developer.microsoft.com/en-us/fluentui#/ Source: https://github.com/microsoft/fluent-ui-react

311 questions
2
votes
0 answers

How to pass parameter to makeStyles in @fluentui/react-components

I am trying Fluent UI React V9, and try to pass the color style from function component to makeStyles. Here is my codesandbox: import { Button, ButtonProps, makeStyles } from "@fluentui/react-components"; import * as React from 'react'; const…
Edward
  • 28,296
  • 11
  • 76
  • 121
2
votes
1 answer

How to resolve this TypeScript lint error?

I am implementing Fluent UI in Next.js according to the documentation on this page. The problem is that when I try to build the application, it returns the following errors: Type '{ children: Element; renderer: any; }' is not assignable to type…
Hermes
  • 21
  • 3
2
votes
0 answers

I need to give customise style to Nav bar in Fluent UI

I working with fluent UI with react js. I want to create a left-sidebar and header section but am unable to find the proper solution I have done the below code but not getting a solution. Below is my react fluent ui code example what i missing to…
Pratik Patel
  • 221
  • 1
  • 10
2
votes
1 answer

How to disable this icon

import * as React from 'react'; import { IContextualMenuProps, IIconProps, Stack, IStackStyles } from '@fluentui/react'; import { CommandBarButton } from '@fluentui/react/lib/Button'; export interface IButtonExampleProps { // These are set based…
kartikay dwivedi
  • 81
  • 4
2
votes
0 answers

Fluent UI React Combo and DropDown not opening in CRA app

I have a new React app (CRA), with FluentUI React added to the project. Some of the FluentUI components are working fine, but neither the combo nor the dropdown are working correctly. When I click either of them to show the list of options, it does…
Hilton Giesenow
  • 9,809
  • 2
  • 10
  • 24
2
votes
0 answers

Using UI Fabric Icons - in application that is Azure/MS services dependent, but it is a standalone web application

It is not clear to me if I can use fabricUI icons & Segoe UI font in my project According to this license which can be found in the project repository I have found this StackOverflow question which is linking to this issue in the Fluent…
Karol Świeca
  • 63
  • 5
2
votes
2 answers

How to generate a Fluent UI theme with in the library?

I was creating a react application with Fluent UI - React, I want something like each user can pick a Primary Color, Text Color, and Background Color when they sign up and their app will be in that theme like the same way done in the Theming…
Aravind Jaimon
  • 85
  • 8
2
votes
1 answer

Fluent UI Web: How to change border radius of TextField?

I am making a user input control which is composed of a TextField, a Dropdown, and a Button. To make the TextField and Dropdown looks like a whole rather than two separate controls, I added two styles (borderTopLeftRadius and…
YuWea
  • 165
  • 9
2
votes
0 answers

Fluent UI grouped detailList: how to show selected count

TL;DR; DetailList has parameter groupProps={{ onRenderHeader: this._onRenderGroupHeader }} but onRenderHeader is not called on every selector click. Fluent UI documentation shows how to show a grouped…
Pavel bosin
  • 61
  • 1
  • 3
2
votes
1 answer

Persist selection between pagination using fluentui/React in DetailsList

How to Persist selection between pagination in DataList in fluentui/React
user2038538
  • 221
  • 5
  • 16
2
votes
0 answers

Fluent UI GroupedList Selection

Playing with FluentUI and trying to make GroupedList working, but I'm stuck and have so many questions about Selection: This is my example: https://codesandbox.io/s/hopeful-chebyshev-n4enr?file=/src/GroupedList.Basic.Example.tsx What I'm trying to…
Слава Мельников
  • 75
  • 1
  • 7
2
votes
2 answers

How to load react component based on prop value

I am using icon component with '@fluentui/react-northstar' library as as below import { QnaIcon } from '@fluentui/react-northstar' const Example1 = () => ( <> ) Now I have to dynamically load the icon…
DevÁsith
  • 1,072
  • 12
  • 38
2
votes
1 answer

Fluent UI React - how to apply global component styles with Fluent ThemeProvider

I'm working with the theming code below. I'm able to apply a global Fluent theme with the ThemeProvider and createTheme utility, but when I add component specific themes, I'm not getting any typings, which makes theming very difficult. So my…
Cory Crowley
  • 304
  • 1
  • 12
2
votes
2 answers

How to use a Collapsible list in Fluent UI React

I am trying to figure out how to use a collapsible list in Fluent UI react. It is strange that on the Fluent UI website: here all the controls are ordered to the left with collapsibles but the control itself is not listed in the options. I would…
g00golplex
  • 397
  • 1
  • 6
  • 17
2
votes
1 answer

How to give styles to Fluent UI Components?

I'm starting to use FluentUI with React and I'm trying to modify the Panel component. I've got this code: const panelStyles = { position: "absolute", top:0, bottom: 0, left: 0, right: 0, margin: "auto" } …
Tomas Barreiro
  • 305
  • 4
  • 11
1
2
3
…
20 21