Hi i'm triying to break line at the content inside a vuetify component but I haven't success. I need help to understand why, see the code below
<v-list-item-content style="word-break: break-word" class="kbDarkBlueText--text d-block" v-else>
{{ longText}}
</v-list-item-content>
I also try to apply the class text-wrap and the style break-all but none success.
pd: html element is setted to word-break:normal
The issue is that v-list-item-title and v-list-item-subtitle avoid line breaks and cut overflowing text with an ellipsis instead. This hides long texts.
To change this behavior, you can manipulate the CSS like this:
<style scoped>
* /deep/ .v-list-item__subtitle {
white-space: normal;
}
</style>
Source: wrap-word does not work on v-list-item-title/subtitle
I'm using scoped CSS here to apply this only to the component you use it in. As the CSS is scoped, the /deep/ selector is required. See docs on scoped CSS in Vue.
If you want to apply the behavior globally, you can remove the scoped property and the /deep/ selector.
Related
HomeComponent templates includes a router outlet
/* home.component.ts */
...
<mat-sidenav-container>
<mat-sidenav-content>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>
that will render a ListComponent which style should set the overflow of mat-sidenav-content.
Why is the following not working?
/* list.component.css */
:host-context(mat-sidenav-content) { /* same for .mat-sidenav-content */
overflow: unset !important;
}
From my understanding the selector should pick any mat-sidenav-content traversing all the DOM to the root.
I'm afraid this isn't how :host-context works. Host context is for applying styles to the component host conditionally based on it's ancestors. In your example the list component should have overflow: unset but if there was another instance of it without mat-sidenav-content as an ancestor it would not have this. This can be useful for applying styles based on a theme as shown in the documentation here:
https://angular.io/guide/component-styles#host-context
I have included an example on stackblitz with your overflow css and I also set the text to be red in that case so it's more obvious and you can see how it applies to one and not the other. Unfortunately there is not a way to do what I believe you are trying to do which is apply a style to a parent when the component is inside that parent.
The example I have also has ::ng-deep in the other component for completeness, as I have seen used to apply styles to other components by some. I would recommend you stay away from this as well as this style will remain after being first applied(try going to that link and then back to list) and ::ng-deep is deprecated anyway.
https://stackblitz.com/edit/angular-material-sidenav-generate-nav-5fvfjq?file=src/app/list/list.component.css
Edit: The stackblitz has been updated to include an example of :host
It's better to think of the host element in HTML terms rather than as a component, so in the dom <app-list> is the host element rather than what's in the template. If you wanted to style stuff in there you wouldn't need to use :host. I've updated my stackblitz example to include host and if you inspect the css you might get a better idea of how it works.
The HTML looks like this
<app-list _nghost-qnl-c20="">
<p _ngcontent-qnl-c20=""> This text should be red only when inside mat-sidenav-content. The font family is set by host.
</p>
</app-list>
And the css:
mat-sidenav-content[_nghost-qnl-c20], mat-sidenav-content [_nghost-qnl-c20] {
color: red;
}
[_nghost-qnl-c20] {
font-family: Arial, Helvetica, sans-serif;
}
So you can see that host uses an attribute generated by angular and :host by itself is simply that attribute and :host-context(element) becomes element [attribute] in the css.
I'm using react-select and I'm trying to style the Select component like written in the DOCS but adding a class with className does not work. The class tag is added to the DOM element's classes but doesn't affect the element itself. The theme stay the same.
If I add a class like this:
<Select
className='my-class'
{...selectProps}
/>
The DOM element looks like this:
<div class="my-class css-2b097c-container">
...
</div>
Which means that the default class css-2b097c-container of react-select will always "override" my custom class.
I've tried to use the classNamePrefix option but did not work either :(
In order to keep my UI design complete I need to design it with classes and not with inline styling!
classNamePrefix works for most but not all components which is kinda annoying to me. Another solution is to add your own className as stated in your question but refer to both of them in your css using [attribute*=value] selector to increase specificity.
<Select
className="mySelect"
options={options}
/>
.mySelect[class*="-container"] {
background-color: lemonchiffon;
padding: 10px;
}
Live Example
My usual setup for each view is an outer DIV that I style as the base background etc.
<div class="outer">
<!-- Actual stuff in here -->
</div>
Then, in the SASS, I refer to it like so.
div.outer { ... }
That adds one lever of indent and seems like an unnecessary (though minor) increment in complexity. So I wonder if it's possible to add a style to the template itself. Partly, to lower the complexity. Partly, because I'm going to have text-only elements with no tags at all.
Is it possible to set the style of template from SASS files if there are no tags, only text in it?
You can apply styling to the component host element with the :host selector:
:host {
color: red;
}
See this stackblitz for a demo.
I use vant ui components in vue, like buttons, I want to make a litte changes of it's style, like color, border ...., but I don't how to complete it, anyone could help me solve the problem? Thanks in advance!
I have tried add css or inline-style on element, but don't work!
Any custom component's css can be changed by using deep selector
GitHub Reference- https://github.com/vuejs/vue-loader/issues/913
Use ::v-deep in this case, as /deep/ will get deprecated.
Reference - Deep Selector
Just inspect class of the rendered element which you want to modify using devtools in chrome or any browser console.
Then, In you consuming component, modify it
<style scoped>
::v-deep vant-component-class {
background: red; //
}
</style>
Without specifying/wrapping with a selector (button {}), the following styled-jsx style declarations will work. The button is properly styled which is great. However, usage like this is not documented in website so i wonder if this syntax is officially supported and safe to use?
<button>
<style jsx>{`
background-color: red;
:hover {
background-color: #ccc;
}
`}
</style>
Test
</button>
Another example, using resolve tag that works too:
const { className, styles } = css.resolve`
font-weight: bold;
`;
styled-jsx uses stylis css preprocessor under the hood. This is how styled-jsx transforms content of a style tag:
transformedCss = transform(
isGlobal ? '' : getPrefix(dynamic, staticClassName),
plugins(css, pluginsOptions),
{ splitRules, vendorPrefixes }
)
Note, that transform here is a wrapper function around stylis.
Thus styles declared inside <style jsx> tag will be wrapped with dynamically generated class and then transformed with stylis.
In your case styled-jsx will produce this css:
If you use global selector no class selector will be added to the generated code and so produced css wont be applied to any elements on the page.
From my point of view it won't be a mistake to use styles without a selector, however, you should do it carefully with a <style jsx> tag because in this case styles will be applied to every element inside a component.
Using this feature with css.resolve looks much more safe since you may manually pick the elements to apply css.
As far as I know, the official documentation misses the explanation of such an important detail.