Skip to content

Latest commit

 

History

History
40 lines (27 loc) · 1.73 KB

README.md

File metadata and controls

40 lines (27 loc) · 1.73 KB

BlazorCssIsolation

The Blazor App puts a ConfigProvider in App.razor so it can cascade the Theme down to all child Components.

The default Primary color is #1890ff. The App demonstrates that it can modify the default Primary color to green.

You will see 2 buttons when you launch the app. One is green border and one is red border.

Since the App changes the default Primary color to green and the Button sets the --ant-button-primary-border-color: var(--ant-primary); as the border color, so all Buttons' default border color will be green not #1890ff if we change the ConfigProvider's Primary value.

There is also a red border Button which is under a nested ConfigProvider that the ButtonPrimaryBorderColor is set to red. It overrides the App's ConfigProvider's settings. This demonstrates that we can also make changes within a nested scope.

ConfigProvider component

  • cascades Theme to child components
  • can be nested with another ConfigProvider
  • can override the default Theme variables

ConfigProvider.razor.css

  • contains base variables

Theme

  • contains DesignTokens of Base and Components' props for the app to customize

DesignTokens.cs

  • uses reflection to generate inline css style variables overrides if any props aren't null
  • is intended to use in all Components

Button

  • is a simple component has an isolated css (Button.razor.css) which contains Button design tokens.

Pros

  • css styles are scoped
  • css styles can be cached
  • different versions can co-exist
  • modify only what you want

Cons

  • not easy to change the css variable prefix and maintain the variables (ideally can generate those isolated css files e.g. from a pre-processor or 'Style Dictionary')