I've created a simple button and styled it via a custom class, but it doesn't work unless i enforce is using !important in the css file. How can I override styling without using !important?
<Button
className="asset-selector-btn"
rightIcon="chevron-down"
text="Pair"
/>
.asset-selector-btn {
background: #19191a;
font-size: 24px;
}
Related
I am not an expert with styling and encapsulation.
Need help with fixing style issue. Style used in a component is overriding the global style.
i am using primeng tabview component in component A for eg:
ComponentA.html:
<p-tabView styleClass="tab-view"></p-tabview>
ComponentA.scss:
.p-tabview {
padding: 0rem;
li.p-highlight span {
font-weight: $semibold-font-weight;
}
}
But this padding is applied to all primeng tabview setting in global style
Component B:
<p-tabView class="tab-view-scheduler"></p-tabview>
global style scss:
.p-tabview {
#media screen and (min-width: $tablet-break) {
padding: 0 4rem 2rem; //this is getting overridden
font-size: $desktop-small-font-size;
}
}
I am working on SPFx with React and I used a Kendo Panel Bar as given- https://www.telerik.com/kendo-react-ui/components/layout/panelbar/
I wanted to override the Panel Item's header CSS like this-
.k-panelbar>.k-item>.k-link {
color: black;
font-size:large;
font-weight: bolder;
background-color: pink;
}
This works fine while working on Stackblitz but not in my SPFx solution's module.scss file. What am I doing wrong?
Let's assume I have something like the following:
<v-app>
<div :class="getCustomCss">Blah</div>
<v-app>
getCustomCss() {
return $this.vuetify.theme.dark ? 'whenThemeIsDark' : 'whenThemeIsLight';
}
<style>
.whenThemeIsDark {
border:1px solid white;
}
.whenThemeIsLight {
border:1px solid black;
}
</style>
What would be the best way to change the color of the divs border when toggling between light/dark themes?
Do I sit and watch the $this.vuetify.theme.dark property and manually change the border from the myDarkClass to myWhiteClass similar to what's shown above? Or do I somehow use the customProperties feature in the theme/options to do this (and how?). Or is there a better way of doing this I'm unaware of?
This is a simple example which only requests the css to change in one spot, but a real application may have tons of custom css on different pages that would keep needing checks like this. I could easily see that getting messy if there are watchers/checks everywhere.
I have read the https://vuetifyjs.com/en/customization/theme page and I have a feeling the Custom Properties section may be the key, but I'm not quite getting how to translate my example to their example.
A css class of theme--light or theme--dark is applied to the v-app v-application which will identify which theme is active for you without additional watchers.
Using your simplified example:
<style>
.v-application.theme--light {
border:1px solid white;
}
.v-application.theme--dark{
border:1px solid black;
}
</style>
I tried to do
.btn, .btn-large, .btn-small{
#extend .pink, .accent-1
}
Is there an issue with the specificity?
You can just override the default btn class by changing background-color property like:
.btn {
background-color: red;
color: white;
}
Button would be like
<button class="btn btn-lg">Hello</button>
I'm not sure if you're only looking for an answer in SASS, but here's a solution in pure CSS.
From the Materialize.css docs get the hex colour code for pink-accent-1 #ff80ab and apply !important parameter to the background-colour for the buttons just to be sure to override the default Materialize classes.
.btn , .btn-small, .btn-large{
background-color: #ff80ab !important;
}
Here's a working fiddle.
Oh! It seems like I misplaced my styles.min.css file. Sorry, everyone. It's really nice to know I have these kinds of resources if I need them.
I am trying to apply css class style to my #Html.TextBoxFor control in mvc3 razor view. But I am not able to see the defined style applied to the control. Below is my code:
In my .cshtml file I have the control as:
#Html.TextBoxFor(model => model.project.ProjectName, new { #class = "myStyle"})
In .css file I have defined the style as:
.myStyle
{
width: 150px;
font-family:Arial, Helvetica, sans-serif;
font-size: 1.00em;
}
What am I doing wrong? Can anyone help me please?
Thanks,
Balaji
If you are sure that your style sheet is properly loaded to the page (check the path to style sheet is correct), possible reason for the probelm could be, some other styles are overriding your defined style. Use IMPORTANT to make this override everything else
input.myStyle
{
width: 150px !IMPORTANT;
font-family:Arial, Helvetica, sans-serif !IMPORTANT;
font-size: 1.00em !IMPORTANT;
}
The .cshtml code looks correct to me. I would inspect the HTML source that gets generated to verify that class="myStyle" is present on the ProjectName input. If it is present, then the problem lies with your CSS (e.g. another style may be overriding myStyle).