Add explanation on how to use CSS isolation with AntDesign Blazor components. #1822 #732
4.0 KiB
order | title |
---|---|
11 | FAQ |
Here are the frequently asked questions about Ant Design and Blazor that you should look up before you ask in the community or create a new issue. We also maintain a FAQ issues label for common github issues.
If your question is style-related, please refer to the list of frequently asked questions about Ant Design React。
Select Dropdown DatePicker TimePicker Popover Popconfirm
disappears when I click another popup component inside it. How do I resolve this?
This is related to the scrolling area of the overlay, which by default only scrolls with the body.
Use <Select PopupContainerSelector="#some-scroll-area">
(API Documentation) to render the component into the scroll area ( where #some-scroll-area
is the CSS Selector of the scrolling element).
And make sure that #some-scroll-area
element is position: relative
or position: absolute
.
How do I modify the default theme of Ant Design?
See: https://ant.design/docs/react/customize-theme .
Why does modifying props in mutable way not trigger a component update?
Blazor use shallow compare of props to optimize performance. You should always pass the new object when updating the state. Please ref React's document
Components are not vertically aligned when placed in single row.
Try Space component to make them aligned.
antd
doesn't work well in mobile.
antd
is not designed for mobile. There is also no Blazor implementation of AntDesign Mobile in development, so if you are interested in contributing code, please contact us.
Do you guys have any channel or website for submitting monetary donations, like through PayPal or Alipay?
https://opencollective.com/ant-design-blazor
Why is CSS isolation not working for Ant Design Blazor components
Blazor applies scope attributes only to native HTML elements to enable CSS isolation. Official documentation
This does not include AntDesign Blazor components, thus these components need to be wrapped in a native HTML element to support CSS isolation.
As you can see, the <div>
is enclosing the <Layout Class="layout">
which is an AntDesign Blazor component.
@page "/test" <--- Blazor
<div> <--- HTML
<Layout Class="layout"> <--- AntDesign
[...]
More explanation in Zonciu´s comment
Now you can create a ".razor.css" file for that page and add your CSS for the "layout" class of the Layout AntDesign component.
::deep .layout {
background: #fff;
}
The ::deep
prefix has to be used on all the CSS for AntDesign Blazor components using CSS isolation.
If you get warnings like "::deep
is not a valid pseudo-element." then you can ignore these. See the documentation
Errors and Warnings
Here are some errors & warnings that you may encounter while using AntDesign Blazor, although most of these are not actual bugs of antd itself.
Build error for Col components
Since the Col
component is recognised by VS as a col
element, you can use AntDesign.Col
to avoid error.
Naming conflicts between the Column in the Form component and the Column in AntDesign Charts
It is also possible to use the namespace AntDesign.Column
or AntDesign.Charts.Column
to avoid error.