Radzen component and preserve style of existing Blazor Server project

Hello. Is there guidance on how to add Radzen Blazor components into an existing Blazor Server application, with minimum change to existing project style? In particular I noticed that after adding a RadzenDropdown control that the vertical scroll bar in the browser has a small blue dot slider instead of the normal proportional length rectangular slider (like these in this forum screen). I tried listing the original css after the Radzen css. Is it possible?

    <link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css">
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />

You can check my reply in this thread which shows how to disable the scrollbar styling: Don't style the scrollbar - #2 by korchev

This also affects the highlight selection colour (::selection). There is no way of altering it due to inherit/unset not picking up anything since the default value is browser dependent. No real workaround too since browser/OS highlights are all different, other than wrapping components and scoping the css to it.

With today's release of Radzen.Blazor (4.1.1) this should no-longer be a problem if you include the -base.css version of a theme. Now all global styling (scrollbars, selection, font etc.) will happen only if you include the "full" version of a theme e.g. "material.css". If you include "material-base.css" this should no longer happen. We will also update the documentation to reflect that.

I found that it would override styles regardless of full or base theme.

With my base theme added the overriding styles are:

and possibly any others I haven't noticed yet.

The base themes should override selection only if you use the RadzenLayout component. -webkit-font-smoothing is only used in Radzen specific classes in the base files. Make sure you are using the latest Radzen.Blazor version and have cleared your browser cache.

I'm not using Radzen layout (just want the dropdown component), the docs, examples and source code do not implement RadzenLayout. ::selection is included in default-base.css, would it be better to only apply it to radzen components by default, not everything?

Default-base.css includes -webkit-font-smoothing: antialiased; with the latest version + cleared cache. Again, could these (along with all body and root styles) only be applied to radzen components?

It is included only in this selector which applies only to RadzenLayout.

.rz-layout ::selection {

It is included only in Radzen components:

.rzi, .rz-column-drag, .rz-datatable-loading-content .rzi-circle-o-notch, .rz-datatable-header .rzi-plus, .rz-sortable-column .rzi-grid-sort, .rz-datatable .rzi-chevron-circle-down, .rz-datatable .rzi-chevron-circle-right, .rz-fileupload-row .rz-button .rzi-close, .rz-fileupload-row .rz-paginator-element .rzi-close,
.rz-fileupload-row .rz-button .rzi-times,
.rz-fileupload-row .rz-paginator-element .rzi-times,
.rz-fileupload-row .rz-button .rz-icon-trash,
.rz-fileupload-row .rz-paginator-element .rz-icon-trash, .rz-menuitem .rz-menuitem-icon {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: var(--rz-icon-size);
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';

Please double check.

I cannot upload as I am a new user but heres a pastebin of: /_content/Radzen.Blazor/css/default-base.css

::selection does not have a layout parent

You seem to be using an older version of the default-base.css file.

Thank you for the help.