I was thinking that Tailwind CSS with CSS modules / post css will work nicely together. to write less code and generate less CSS but...
when I used tailwind with #apply it just applies styles to that class
example
.root {
#apply flex align-center;
}
from styles.root to "root flex align-center"
but instead it just add css to .root class
I think that it should work as composes: flex align-center from global;
Is my configuration wrong or it's just working in that way?
That is just how the #apply directive works. #apply is used to inline any existing utility classes into your own custom CSS.
/* Input */
.root {
#apply flex items-center;
}
/* Output */
.root {
display: flex;
align-items: center;
}
Related
i'm styling a React component with css modules.
there's a part where i insert html code using dangerouslySetInnerHTML
<div className={styles.article_text} dangerouslySetInnerHTML={{__html: props.text}} />
i have no control over this html code but i want to style it. i can style the html by using tag rules like this:
.article_text {
h2 {
#apply text-3xl mt-6 mb-4; /* this is applied to headings ... */
}
p {
#apply mb-3; /* and paragraphs */
}
...
what's not working is styling css classes this way:
.article_text {
.listblock {
#apply bg-white; /* this doesnt apply to the div.listblock inside the html code*/
}
is there a way i can get this to work?
I am not so into Angular and CSS and I have the following poblem trying to define a CSS related to a specific component (into the .css file of a component).
If I do in this way:
.p-column-title {
display: none;
}
it works fine. But if I do in this way (I obtained it from the PrimNG showcase example):
:host ::ng-deep {
.p-column-title {
display: none;
}
}
The CSS style is not applied.
Why? What is wrong? From what I have understand the :host ::ng-deep is used to let be global style the CSS role...so maybe it is not the correct way declare in this way into the CSS of a specific component.
I think that I am missing some piece...
I think you have to make it like this:
:host ::ng-deep .p-column-title{
display: none;
}
I am using ngx carousel in my angular project and want to disable navigation arrows .I have already tried following code but none worked
.carousel-control {
display: none;
}
it looks like my css is not able to override the ngx bootstrap css.
can anyone help me with this
try
::ng-deep .carousel-control {
display: none;
}
But FYI ng-deep is not a good way of doing things, ideally there is should be #Input field in that ngx carousel so you can configure navigation.
you can use
:host ::ng-deep {
.carousel-control {
display: none;
}
}
If the ::ng-deep combinator is used without the :host pseudo-class selector, the style can bleed into other components.
Is it possible to work with nested css selectors when using vuejs css modules?
For example, I want to scope this css (so that id does not affect child components):
.list {
...
.item {
...
}
}
In the documentation I could see only not-nested examples, but is it at all convenient, since I'll need then name them like .list-item which resembles BEM. But if I use BEM there is no point in using css modules, is there?
Yes, it's possible to work with nested css selectors so they will not affect child components; use css modules.
You need to use a preprocessor to enable nesting, either LESS or SASS.
If using Single File Components your component would look something like this
<template>
<ul :class="$style.list">
<li :class="$style.item"></li>
</ul>
</template>
<!-- Or lang="less" -->
<style module lang="scss">
.list {
...
.item {
...
}
}
</style>
Yes, nesting css selectors is called using scss. You will have to setup scss.
Example make your style tag in the vue component:
<style scoped lang="scss">
The scoped attribute tells it to apply only to this component.
In regards to bem you can do stuff like this in scss:
.list {
//styles-a
&-item {
//styles-b
}
}
which will convert to this in css:
.list {
//styles-a
}
.list-item {
//styles-b
}
If you want, for example, override CSS class of some UI library in Vue you can use :global keyword. Let's say you have a n-dropdown component from Naive UI library. And you want to customize it with overriding its native very deeeeeply nested n-dropdown-option-body__prefix--show-icon CSS class only in current component using CSS modules. Here is how you can do it:
<template>
<n-dropdown :class="$style.menu">
</n-dropdown>
</template>
<style module>
.menu:global.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body .n-dropdown-option-body__prefix.n-dropdown-option-body__prefix--show-icon {
margin-left: 33px;
margin-right: 19px;
}
</style>
In the end you will get selector which looks something like this
.MobileNavMenu_menu_NhSka.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body .n-dropdown-option-body__prefix.n-dropdown-option-body__prefix--show-icon {
margin-left: 33px;
margin-right: 19px;
}
So all classes after :global keyword will be untouched by module manipulations.
If .n-dropdown-menu should be a child of menu then :global should have a whitespace from both sides:
.menu :global .n-dropdown-menu
Vue will remind you about it with horrible crash
I have the following Angular component
<div id="content-div">
<router-outlet></router-outlet>
</div>
I place different components within the div above. My requirement is that all such components should have the css rule height:100%. Instead of duplicating this code, I tried to use >* css but that isn't working.
#content-div >* {
height:100%;
}
Does >* doesn't work across components? How could I make a child component take css rule from its parent?
By default Angular encapsulates CSS. If you want to disabled this you need to do so in your component setup
#Component({
selector: 'app-child-component',
template: `<div class="parent-class">Child Component</div>`,
encapsulation: ViewEncapsulation.None // Use to disable CSS Encapsulation for this component
})
You need to do it in the next way:
:host /deep/ > * {
height: 100%;
}
But it's very unlikely you should do * it's very heavy and slow selector, it's better to limit yourself to something more specific, like the class on container or at least some tag.
Had to change the approach. Instead of using >*, used css-grid. It worked.
#content-div{
height:100%;
display:flex;
align-items: center;
justify-content: center;
}