-
|
There seems to be quite a few ways to handle styling. We can create the styles in-line with the component props. There's the new |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 4 replies
-
|
It's important to understand the difference between CSS in JS ( CSS in JS is a true CSS, meaning it injects CSS style declarations to document's With CSS in JS you could use most of the CSS features like cascading etc. Quick demoTo understand what CSS in JS does: /* copy-paste to your browser console and hit Enter */
var style = document.createElement('style');
style.innerHTML = "div {border: 5px solid black; background-color: blue;}";
document.head.appendChild(style); If you go (for example) to https://www.microsoft.com/en-us/, and paste this snippet to browser console, background of all the divs in the page will become blue:
Actual implementationHere's how mergeStyleSets is implemented:
{
foo: {
color: 'blue'
},
bar: {
color: 'red'
}
}
{
foo: '3fh9483hrf4ioewjzour', // string
bar: 'dfsjk43iow3rjf9ejwfjf0' // string
}Your component: <Component className={styles.foo} />So effectivelly: <Component className="3fh9483hrf4ioewjzour" />This adds the "3fh9483hrf4ioewjzour" class name (string) to component's DOM element: <div class="3fh9483hrf4ioewjzour" />
var style = document.createElement('style');
style.innerHTML = `
.3fh9483hrf4ioewjzour {
color: blue;
}
.dfsjk43iow3rjf9ejwfjf0{
color: red;
}`;
document.head.appendChild(style); It creates it only once - first time the component is mounted. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you very much for the breakdown! Since writing this I have experimented more with the // Simple function definition so we can pass in the theme and create the styles
const getStyles = (theme: ITheme) =>
mergeStyleSets({
text: {
color: theme.palette.themePrimary
}
});
const FunctionComponent = () => {
// Use the hook instead of getTheme so when we change the theme provided to ThemeProvider we receive the updates
// At least I think that's how this is working...
const theme = useTheme();
const styles = getStyles(theme);
return <Text variant="xLarge" className={styles.text}>Hello Github!</Text>;
}This seems to be working well for us thus far, I'm just unsure if there are any tradeoffs for this approach. One thing about const example = mergeStyleSets({
thing: {
ba
}I would expect to see VSCode have the intellisense options with things like "background" or "backgroundColor" show up, but that isn't the case. |
Beta Was this translation helpful? Give feedback.
-
|
Well, I have the intelissense (of style props). I'd assume it's just a metter of configuration. |
Beta Was this translation helpful? Give feedback.
-
|
Furthermore, if you want to ensure the best performance with mergeStyleSets, you could wrap it into Fluent's memoizeFunction: |
Beta Was this translation helpful? Give feedback.
-
|
@dggsax to get the Intellisense, you should type each selector as import { IProcessedStyleSet, IStyle, memoizeFunction, mergeStyleSets } from "@fluentui/react";
interface YourStyles {
root: IStyle;
child: IStyle;
}
export const getClassNames = memoizeFunction(
(): IProcessedStyleSet<YourStyles> =>
mergeStyleSets({
root: {
// intellisense here
},
child: {
// intellisense here
},
})
);
|
Beta Was this translation helpful? Give feedback.
It's important to understand the difference between
style,stylesandclassNameprops.CSS in JS (
mergeStyles,mergeStyleSets) is used withclassNameprop, whereasstyleandstylesare inline styles, applied directly to DOM element's style property.CSS in JS is a true CSS, meaning it injects CSS style declarations to document's
<head>.With CSS in JS you could use most of the CSS features like cascading etc.
Quick demo
To understand what CSS in JS does:
If you go (for example) to