Skip to content

Docs: Adds conditional render to the Styling and CSS docs #24145

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jonniebigodes merged 4 commits into from
Oct 2, 2023
Merged

Docs: Adds conditional render to the Styling and CSS docs #24145

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b253aeb
Adds conditional render to the Styling and CSS docs
jonniebigodes Sep 11, 2023
cd3e9bd
Merge branch 'next' into add_conditional_render_styling_docs
jonniebigodes Sep 12, 2023
60ce17f
Merge branch 'next' into add_conditional_render_styling_docs
jonniebigodes Oct 2, 2023
b861017
Merge branch 'next' into add_conditional_render_styling_docs
jonniebigodes Oct 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion docs/configure/styling-and-css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ CSS-in-JS libraries are designed to use basic JavaScript, and they often work in

If you need webfonts to be available, you may need to add some code to the [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head) file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the [static file location](./images-and-assets.md#serving-static-files-via-storybook-configuration).

<IfRenderer renderer='angular'>

## Troubleshooting

### Styles aren't being applied with Angular
Expand All @@ -56,7 +58,7 @@ The latest Angular releases introduced significant changes in configuring and st
}
```

Additionally, if you need Storybook-specific styles that are separate from your application, you can configure the styles with [Storybook's custom builder](../get-started/install.md), which will override the application's styles:
Additionally, if you need Storybook-specific styles that are separate from your application, you can configure the styles with [Storybook's custom builder](../get-started/install.md#troubleshooting), which will override the application's styles:

```json
{
Expand Down Expand Up @@ -121,3 +123,5 @@ Starting with version `14.1.8`, Nx uses the Storybook builder directly, which me
```

When Nx runs, it will load Storybook's configuration and styling based on [`storybook`'s `browserTarget`](https://nx.dev/storybook/extra-topics-for-angular-projects#setting-up-browsertarget).

</IfRenderer>