I need to implement different styles for one type of element in my project’s page. But I am not able to have more than one fully functional styling.
In this example I have my PartPage.razor with its PartPage.razor.css. and I am implementing two identical styles with different naming, trying to get the same result while implementing through different style names:
PartPage.razor
@page "/part"
<th>
<label class="form-label-another-label">SomeLabel</label>
<label class="form-label">SomeLabel</label>
<input type="text" class="form-control" placeholder="SomeText" />
<input type="text" class="form-control-another-control" placeholder="SomeText" />
</th>
PartPage.razor.css
.form-label{
color: aqua
}
.form-label-another-label {
color: aqua
}
.form-control {
color: #077df2;
background: #f2f0f0;
}
.form-control-another-control {
color: #077df2;
background: #f2f0f0;
}
and this is what it does in the app:
blazor app
It seems like it works allright for text adjustment, but not for the form control. Why is that? Is there a way how to have two stylings for same element?
The css is correctly connected to the razor page as this:
page css
2
Answers
The problem is that you are using a CSS class that is already available in blazor by default:
If you rename
form-control
to something different, e.g.form-control1
(in CSS and in HTML) the result will look like this:So watch out for already used CSS class names and remember the browser inspection tool is your friend in the web 🙂
Blazor uses Bootstrap by default.
form-control
is the default Bootstrap css style, so that the element applies the build-in style which caused the difference.A quick way is avoid using Bootstrap default css style name, change like below:
Then use it in the view: