Office Fabric UI I[component]StyleProp vs I[component]Styles interface use
In the Office Fabric UI documentation every component has two interfaces, for example
https://developer.microsoft.com/en-us/fabric#/components/nav
has
INavStyleProps interface
and
INavStyles interface
a component implementing INavStyleProps can take in any of the listed props to customize style, for example
I am wondering if there is any way to interact with INavStyles classes exposed through the documentation; essentially what does implementing the INavStyles interface guarantee to the consumer of the component, other than the listed classes and styles are implemented. Is there a way to override, customize, or otherwise interact with the classes exposed through this interface similar to how we can use props to interact with components implementing INavStylesProps.
reactjs typescript sharepoint web-parts office-ui-fabric
asked Nov 12 at 15:41
Loren Shqipognja
113110
add a comment |
In the Office Fabric UI documentation every component has two interfaces, for example
https://developer.microsoft.com/en-us/fabric#/components/nav
has
INavStyleProps interface
and
INavStyles interface
a component implementing INavStyleProps can take in any of the listed props to customize style, for example
I am wondering if there is any way to interact with INavStyles classes exposed through the documentation; essentially what does implementing the INavStyles interface guarantee to the consumer of the component, other than the listed classes and styles are implemented. Is there a way to override, customize, or otherwise interact with the classes exposed through this interface similar to how we can use props to interact with components implementing INavStylesProps.
reactjs typescript sharepoint web-parts office-ui-fabric
asked Nov 12 at 15:41
Loren Shqipognja
113110
add a comment |
In the Office Fabric UI documentation every component has two interfaces, for example
https://developer.microsoft.com/en-us/fabric#/components/nav
has
INavStyleProps interface
and
INavStyles interface
a component implementing INavStyleProps can take in any of the listed props to customize style, for example
I am wondering if there is any way to interact with INavStyles classes exposed through the documentation; essentially what does implementing the INavStyles interface guarantee to the consumer of the component, other than the listed classes and styles are implemented. Is there a way to override, customize, or otherwise interact with the classes exposed through this interface similar to how we can use props to interact with components implementing INavStylesProps.
reactjs typescript sharepoint web-parts office-ui-fabric
asked Nov 12 at 15:41
Loren Shqipognja
113110
In the Office Fabric UI documentation every component has two interfaces, for example
https://developer.microsoft.com/en-us/fabric#/components/nav
has
INavStyleProps interface
and
INavStyles interface
a component implementing INavStyleProps can take in any of the listed props to customize style, for example
I am wondering if there is any way to interact with INavStyles classes exposed through the documentation; essentially what does implementing the INavStyles interface guarantee to the consumer of the component, other than the listed classes and styles are implemented. Is there a way to override, customize, or otherwise interact with the classes exposed through this interface similar to how we can use props to interact with components implementing INavStylesProps.
reactjs typescript sharepoint web-parts office-ui-fabric
reactjs typescript sharepoint web-parts office-ui-fabric
asked Nov 12 at 15:41
Loren Shqipognja
113110
asked Nov 12 at 15:41
Loren Shqipognja
113110
asked Nov 12 at 15:41
Loren Shqipognja
113110
asked Nov 12 at 15:41
Loren Shqipognja
113110
asked Nov 12 at 15:41
Loren Shqipognja
113110
113110
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Here is link showing the use of both interfaces for Nav. It's a how we give to Nav the default styles.
In order to override the default styles for any INavStyles area, you can use the styles prop and pass to it a styleFunctionOrObject. As you can see from the first link provided, INavStyleProps are used to pass some values to be used in the styling of the parts of the Nav or booleans to have some conditional styling. Also, that is how we pass the theme to the styles.
A style function you can pass to styles prop would look exactly as the one we use to provide the default styles minus the getGloballClassNames. Also if you want to style just one area the return type should be Partial<INavStyles> as all areas are required and it will complain if you don't provides styles for all of them.
Let me know if this cleared the confusion on how to make use of both interfaces.
answered Nov 14 at 20:11
Vitalie Braga
1011
I came across this solution in the sharepoint documentation eventually and it works. However you have to represent the styles as JSON objects and they suggest storing these as css.js files. Is this the best approach in your opinion or is there a better way to integrate through the sharepoint tools, similarly to how they convert the sass files to js objects under the hood when you import.
– Loren Shqipognja
Nov 14 at 20:28
I think a better naming would be style objects, rather than JSON. When you say storing, you mean where the style object is written de facto? Also, could you give me a link to the SharePoint documentation you found?
– Vitalie Braga
Nov 15 at 3:48
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53265495%2foffice-fabric-ui-icomponentstyleprop-vs-icomponentstyles-interface-use%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Here is link showing the use of both interfaces for Nav. It's a how we give to Nav the default styles.
In order to override the default styles for any INavStyles area, you can use the styles prop and pass to it a styleFunctionOrObject. As you can see from the first link provided, INavStyleProps are used to pass some values to be used in the styling of the parts of the Nav or booleans to have some conditional styling. Also, that is how we pass the theme to the styles.
A style function you can pass to styles prop would look exactly as the one we use to provide the default styles minus the getGloballClassNames. Also if you want to style just one area the return type should be Partial<INavStyles> as all areas are required and it will complain if you don't provides styles for all of them.
Let me know if this cleared the confusion on how to make use of both interfaces.
answered Nov 14 at 20:11
Vitalie Braga
1011
I came across this solution in the sharepoint documentation eventually and it works. However you have to represent the styles as JSON objects and they suggest storing these as css.js files. Is this the best approach in your opinion or is there a better way to integrate through the sharepoint tools, similarly to how they convert the sass files to js objects under the hood when you import.
– Loren Shqipognja
Nov 14 at 20:28
I think a better naming would be style objects, rather than JSON. When you say storing, you mean where the style object is written de facto? Also, could you give me a link to the SharePoint documentation you found?
– Vitalie Braga
Nov 15 at 3:48
add a comment |
Here is link showing the use of both interfaces for Nav. It's a how we give to Nav the default styles.
In order to override the default styles for any INavStyles area, you can use the styles prop and pass to it a styleFunctionOrObject. As you can see from the first link provided, INavStyleProps are used to pass some values to be used in the styling of the parts of the Nav or booleans to have some conditional styling. Also, that is how we pass the theme to the styles.
A style function you can pass to styles prop would look exactly as the one we use to provide the default styles minus the getGloballClassNames. Also if you want to style just one area the return type should be Partial<INavStyles> as all areas are required and it will complain if you don't provides styles for all of them.
Let me know if this cleared the confusion on how to make use of both interfaces.
answered Nov 14 at 20:11
Vitalie Braga
1011
I came across this solution in the sharepoint documentation eventually and it works. However you have to represent the styles as JSON objects and they suggest storing these as css.js files. Is this the best approach in your opinion or is there a better way to integrate through the sharepoint tools, similarly to how they convert the sass files to js objects under the hood when you import.
– Loren Shqipognja
Nov 14 at 20:28
I think a better naming would be style objects, rather than JSON. When you say storing, you mean where the style object is written de facto? Also, could you give me a link to the SharePoint documentation you found?
– Vitalie Braga
Nov 15 at 3:48
add a comment |
Here is link showing the use of both interfaces for Nav. It's a how we give to Nav the default styles.
In order to override the default styles for any INavStyles area, you can use the styles prop and pass to it a styleFunctionOrObject. As you can see from the first link provided, INavStyleProps are used to pass some values to be used in the styling of the parts of the Nav or booleans to have some conditional styling. Also, that is how we pass the theme to the styles.
A style function you can pass to styles prop would look exactly as the one we use to provide the default styles minus the getGloballClassNames. Also if you want to style just one area the return type should be Partial<INavStyles> as all areas are required and it will complain if you don't provides styles for all of them.
Let me know if this cleared the confusion on how to make use of both interfaces.
answered Nov 14 at 20:11
Vitalie Braga
1011
Here is link showing the use of both interfaces for Nav. It's a how we give to Nav the default styles.
In order to override the default styles for any INavStyles area, you can use the styles prop and pass to it a styleFunctionOrObject. As you can see from the first link provided, INavStyleProps are used to pass some values to be used in the styling of the parts of the Nav or booleans to have some conditional styling. Also, that is how we pass the theme to the styles.
A style function you can pass to styles prop would look exactly as the one we use to provide the default styles minus the getGloballClassNames. Also if you want to style just one area the return type should be Partial<INavStyles> as all areas are required and it will complain if you don't provides styles for all of them.
Let me know if this cleared the confusion on how to make use of both interfaces.
answered Nov 14 at 20:11
Vitalie Braga
1011
answered Nov 14 at 20:11
Vitalie Braga
1011
answered Nov 14 at 20:11
Vitalie Braga
1011
answered Nov 14 at 20:11
Vitalie Braga
1011
1011
I came across this solution in the sharepoint documentation eventually and it works. However you have to represent the styles as JSON objects and they suggest storing these as css.js files. Is this the best approach in your opinion or is there a better way to integrate through the sharepoint tools, similarly to how they convert the sass files to js objects under the hood when you import.
– Loren Shqipognja
Nov 14 at 20:28
I think a better naming would be style objects, rather than JSON. When you say storing, you mean where the style object is written de facto? Also, could you give me a link to the SharePoint documentation you found?
– Vitalie Braga
Nov 15 at 3:48
add a comment |
I came across this solution in the sharepoint documentation eventually and it works. However you have to represent the styles as JSON objects and they suggest storing these as css.js files. Is this the best approach in your opinion or is there a better way to integrate through the sharepoint tools, similarly to how they convert the sass files to js objects under the hood when you import.
– Loren Shqipognja
Nov 14 at 20:28
I think a better naming would be style objects, rather than JSON. When you say storing, you mean where the style object is written de facto? Also, could you give me a link to the SharePoint documentation you found?
– Vitalie Braga
Nov 15 at 3:48
I came across this solution in the sharepoint documentation eventually and it works. However you have to represent the styles as JSON objects and they suggest storing these as css.js files. Is this the best approach in your opinion or is there a better way to integrate through the sharepoint tools, similarly to how they convert the sass files to js objects under the hood when you import.
– Loren Shqipognja
Nov 14 at 20:28
I came across this solution in the sharepoint documentation eventually and it works. However you have to represent the styles as JSON objects and they suggest storing these as css.js files. Is this the best approach in your opinion or is there a better way to integrate through the sharepoint tools, similarly to how they convert the sass files to js objects under the hood when you import.
– Loren Shqipognja
Nov 14 at 20:28
I think a better naming would be style objects, rather than JSON. When you say storing, you mean where the style object is written de facto? Also, could you give me a link to the SharePoint documentation you found?
– Vitalie Braga
Nov 15 at 3:48
I think a better naming would be style objects, rather than JSON. When you say storing, you mean where the style object is written de facto? Also, could you give me a link to the SharePoint documentation you found?
– Vitalie Braga
Nov 15 at 3:48
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53265495%2foffice-fabric-ui-icomponentstyleprop-vs-icomponentstyles-interface-use%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
