What is the method for updating the color of the command bar in Fluent-React UI?

I'm working on some code and I'd like to change the background color while keeping the hovering effect. Can anyone help me with that?

<CommandBar
    styles={{
    root: {
    paddingLeft: 0,
    paddingRight: 0,
    selectors: {
        "& .ms-OverflowSet-item:nth-child(4)": {
          display: "flex",
          flexGrow: 1,
      },
    },
  },
}}
overflowItems={props.overflowItems}
items={props.items}
/>

For more information, check out the official documentation here: https://developer.microsoft.com/en-us/fluentui#/controls/web/commandbar

Any help would be greatly appreciated! Thanks in advance!

cssreactjsoffice-addinsfluent-uifluentui-react

Answer №1

Here is the solution for you: apply inline style injection or create a custom shared component as required

//#region UX Command Bar Component
private _commandbarItems: ICommandBarItemProps[] = [
    {
        key: 'refresh',
        text: 'Refresh',
        iconProps: { iconName: 'Refresh' },
        onClick: () => this._getDataList(this._filter),
    },
    {
        key: 'run',
        text: 'Run Jobs',
        iconProps: { iconName: 'Play' },
        buttonStyles:{
            root: {
              backgroundColor: '#0078D4',
              color: 'white',
              fontWeight: 'bold',
            }
          },
        onClick: () => this._onCommandSyncDialog(),
    },
...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to place an image in the bottom right corner using CSS

Does anyone know how to position an image in the bottom right corner of a div? I have tried using margin-right and padding-right with 0px on the img tag, but it does not seem to work. The black lines indicate that I do not need that space Here is my Cod ...

htmlcss

Creating a border around an SVG element using the background color of its parent container

I am aiming to layer 2 SVGs on top of each other. The top SVG will have an outline to make it stand out more from the bottom SVG. These SVGs are embedded on buttons with transitions and hover colors. I want the outline SVG to match the background color of ...

cssmaterial-ui

Only on mobile devices, Material-UI components spill over the screen

Update: This issue is isolated to one specific page. Other pages within the website are displaying correctly. Recently, I developed a web page using React and Material-UI. The main components utilized are Grid and Container. While the layout appears fine ...

javascripthtmlcssreactjsmaterial-ui

Exploring the integration of mixins from .scss files within node_modules into our .tsx or .jsx files for enhanced styling

I am currently facing a challenge with importing a .scss file from one of the installed node_modules into my .tsx file. The scss file contains a mixin named @mixin make-embedded-control($className: embedded-control){.....} which has all the necessary css ...

cssreactjssassscss-mixins

Steps to conceal an accordion upon loading the page and reveal it only when clicking on a specific element

Below is the code I am using to display an accordion in a Fancybox popup. However, I do not want the accordion to be visible on page load. If I hide it, the content inside also gets hidden when showing the accordion in the popup. When user clicks on Click ...

jqueryhtmlcssaccordion

Can the warning about a missing dependency in useEffect be incorrect at times?

After using hooks for some time, I still don't quite grasp why React insists on including certain dependencies in my useEffect that I don't want. My understanding of the 'dependencies' in a useEffect hook is as follows: You should add ...

javascriptreactjsreact-hooksuse-effect

Issue with displaying the file-field in Django admin after upgrading from Django 2.1 to version 3

Since upgrading from Django 2.1 to 3, the file field in Django admin is now displaying as "loading". https://i.sstatic.net/8JDWu.png An error is appearing in the console. https://i.sstatic.net/RCgwt.png https://i.sstatic.net/78YtG.png Previously, ther ...

javascripthtmlcssdjangoconsole

Exploring the power of caching fetch requests with Next.js version 14

Currently, I am retrieving data from Contentful's API to display on my page.tsx files. The process works well, but it seems like the data is being over-cached. Although the content I'm pulling rarely changes, I'd like it to fetch new data ev ...

reactjsnext.js

Display only the content that is within the container and visible

Within this demonstration, there are 2 divs present - one containing the text t, and the other containing the text s. Both of these divs are enclosed within the .items container. As it stands currently, both divs are visible. However, my goal is to modify ...

htmlcss

The horizontal scrolling feature will not activate

I meticulously followed the instructions in a YouTube tutorial to implement this code. What's puzzling is that while the code works perfectly for the person in the video, allowing the grid items to scroll to the right, it doesn't have the same ef ...

htmlcssflexbox

Creating seamless scrolling in ReactJS without any pre-built components

Can anyone guide me on how to implement an infinite scroll in reactJs using a JSON dataset? I prefer building it from scratch without relying on any library. {data?.map((conto) => { return ( <Suspense key={conto._uid} fallback={<p>Loadin ...

javascriptreactjsjsonnext.jsinfinite-scroll

The CSS show and hide feature is effective across all browsers except for Safari. What steps can be taken to address this issue

My toggle trigger works perfectly in Chrome, but I'm having trouble getting it to work in Safari. Any suggestions? <a href='#show'class='show'>see more --></a> <a href='#hide'class='hide&apos ...

htmlcsssafari

What is the best way to combine a collection of strings and HTML elements in a React application?

I am facing a challenge with my list of names. I typically use .join to add commas between each name, but one specific item in the list needs to display an icon of a star next to it based on a certain condition. The issue is that using join turns everyth ...

javascripthtmlreactjs

How can I stop React from automatically scrolling the page when re-rendering?

Encountered a perplexing issue with React - it automatically scrolls the page upon re-render. Check out the demo app on CodeSandbox - https://codesandbox.io/s/react-scroll-bug-demo-y7u50j?file=/src/App.js To replicate the problem, follow these steps: Sc ...

reactjsscroll

Next.js has shifted away from pre-generating page HTML

I have been working on a Jamstack application using Next.js, and I recently realized that the pages stopped pre-generating the HTML content without me noticing it at first. The pages still load fine, but there is no pre-generated HTML. Even the simplest c ...

javascriptreactjsnext.jsshopify-api

Encountering issues with deploying NextJs on Elastic Beanstalk in a live environment

My NextJs application, running on AWS Elastic Beanstalk and deployed using AWS Codebuild (buildspec.yml), suddenly started encountering a 500 internal error response in Chrome dev console for the production build only. This issue arose without any changes ...

reactjsnext.jsamazon-elastic-beanstalkaws-codebuild

Tips for increasing the number of pixels in the current position of an element?

I need to shift an image to the right by adding pixels to its current left position. The challenge arises when the image, positioned absolutely, goes back to its nearest relative parent (the container) and creates a strange visual effect. Within my flex c ...

javascriptjqueryhtmlcss

The issue of data being duplicated when clicking on react-cookie-consent

Currently, I am utilizing the npm package https://www.npmjs.com/package/react-cookie-consent to implement a cookies consent feature in my react TypeScript application. However, I have encountered two issues with this package. Firstly, upon clicking the acc ...

reactjstypescriptreact-cookie-consent

"Troubleshooting: Why is the onError event not triggering

Has anyone else experienced issues with using a third-party API to fetch YouTube thumbnails with higher resolution, sometimes resulting in a code 404 error? I've been trying to replace the image source with a default YouTube thumbnail retrieved from i ...

javascriptreactjsimage

What is the functionality of the icon `<i>` in Twitter Bootstrap?

After adding an icon to a webpage, I noticed that it replaced the old, semi-deprecated <i> tag and instead used a customized image tag. It almost seems like <i ...> is just a simpler version of <img ...>. I'm curious about how this ...

htmlcsstwitter-bootstrap