Last active
February 21, 2020 05:23
-
-
Save mikezimm/6deecdcd8bfe2dbb3677d55c376767ee to your computer and use it in GitHub Desktop.
Ulitmate styling possibilities of Fabric React components?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import '~office-ui-fabric-react/dist/sass/References.scss'; | |
.myWebPartClass { | |
//Key is using this format.... and reference this page for more details | |
//https://www.w3.org/TR/CSS21/selector.html%23id-selectors#type-selectors | |
//Basically, this will get any child elements of className={ styles.listViewTransparent } | |
//Then find only items where the property data-automationid = DetailsRowFields. | |
//You can use this syntax and others to filter on any element property, wildcard etc.... | |
.listViewTransparent *[data-automationid="DetailsRowFields"] { | |
background-color: #eaeaea ; | |
transition: all 0.3s ease; | |
} | |
.listViewTransparent *[data-automationid="DetailsRowFields"] :hover { | |
background-color: #c2c2c2 ; | |
color: #212121; | |
transition: all 0.3s ease; | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export function xyz(){ | |
let listView = | |
<div | |
className={ styles.listViewTransparent }> | |
<ListView | |
items={theseAreItems} | |
viewFields={viewFields} | |
/> | |
</div>; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment