SharePoint Online: Change color of Modern QuickLinks

Question

Is there anyway using CSS to change the color of individual link in QuickLinks web part in SharePoint Online Modern site?

By default the color is blue, however using CSS on this element you can change the color: .content_6c75a884

I was wondering if it's possible to somehow change the background color of each link based on the text of that tile.

For Ex: If the text of Tile1= Home then set background-color: #ffcc00 etc.

Answer 1

Deploy react-script-editor SPFx web part to your tenant, then, you could add CSS/JavaScript for this requirement.

For example:

 <style type="text/css">
    /*match by label, there is a blank*/
    a[aria-label="MSDN. "] {
        background-color: azure !important;
    }

    a[aria-label="mylist3. "] {
        background-color: red !important;
    }
    /*match outter div by order, you could find the data-list-index attribute by developer tool*/
    div[data-list-index="2"] {
        background-color: rosybrown !important;
    }
</style>