Не могу стилизовать компоненты Blazor - PullRequest
Новая
       38

Не могу стилизовать компоненты Blazor

0 голосов
/ 20 июня 2020

Я просто не знаю, как стилизовать компоненты Blazor, я начал проект, в котором что-то уже сделано, например, страница счетчика, панель навигации и тому подобное. В папке wwwroot App.css есть файл, там написано много стилей, но при удалении кода ничего не происходит, страница остается красивой, когда я вставляю какой-то код, ничего не происходит, так как мне сделать стиль это страницы? Куда мне поместить файлы css, чтобы стилизовать их?

Печать

Ответы [ 3 ]

0 голосов
/ 20 июня 2020

Возможно, CSS кэшируется.

Is включен в файл "index. html". Поймите, что большая часть стиля на самом деле происходит из файла bootstrap .min. css.

Вы можете попробовать изменить ссылку на 

<link href="css/app.css?v=1" rel="stylesheet" />

Посмотрите, имеет ли это какое-либо значение.

0 голосов
/ 22 июня 2020

Для вашего CSS, убедитесь, что он находится в вашем _Host.cs html файле 

<link href="css/site.css" rel="stylesheet" />

Эта строка работает, если у вас есть файл CSS под wwwroot/CSS/site.css, который является по умолчанию для нового проекта Blazor.

enter image description here

If you have a difference CSS file, you can drag it from Solution Explorer to the _Host.cshtml file and Visual Studio adds the link for you.

Not that you need to know this, but you can also reference CSS in a Nuget package like this:

I use BlazorStyled a lot because you can dynamically change CSS values:

I have an open source project that uses BlazorStyled Nuget package.

Code is here if you want a working example:

https://github.com/DataJuggler/BlazorChat

Пример использования BlazorStyled 

<Styled @bind-Classname="@BubbleStyle">
    background-image: url('@ImageUrl');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    left: 0%;
    top: 0vh;
    width: 84%;
    height: auto;
    margin-bottom: 1.2vh;
</Styled>

В приведенном выше примере @BubbleStyle - это просто строковое свойство в моем компоненте.

Свойство @ImageUrl изменяется для каждого сообщения чата, где я показываю один из этих пузырей:

enter image description here

Site is also live, but not many people have signed up yet:

https://blazorchat.com

0 голосов
/ 20 июня 2020

Чтобы применить стиль, вам необходимо загрузить ресурсы на соответствующую страницу следующим образом: 

<StyleSheet Resource="folder/MyStyles.css" Assembly="GetType().Assembly"></StyleSheet>

Более подробную информацию об этом можно найти в документации: https://docs.microsoft.com/en-us/mobile-blazor-bindings/ui/css-styles

...