I have an Img component that consists of a figure with a nested image:
<figure>
<img #dragstart="stopDrag" :src="src" />
</figure>
This component is used in another component, where I'm trying to overwrite the inner figure/image's style from the parent. The figure does get new styling, but the inner image does not.
<template>
<List>
<li class="gridItem">
<Img :src="require('#/assets/images/girl.png')" />
</li>
</List>
<template>
...
<style scoped lang="scss">
.gridItem {
& figure {
width: 100%;
height: 100%;
//I did try & >>> img, and it didn't work.
& img {
width: auto;
}
}
}
</style>
The current version of this project is on my Github, so maybe it's easier to see the problem with a cloned repo? Github Repo
>>> seem to have no effect for the Sass implementations I've tried, including node-sass and sass. On the other hand, node-sass and sass still support /deep/.
The following SCSS works for scoped styles with node-sass 4.14.1 and sass 1.26.9:
.gridItem {
& figure {
width: 100%;
height: 100%;
& /deep/ img {
width: 500px;
}
}
}
According to Vue own documentation
"Some pre-processors, such as Sass, may not be able to parse >>> properly. In those cases you can use the /deep/ or ::v-deep combinator instead - both are aliases for >>> and work exactly the same."
So instead of & >>> img do &::v-deep img. I hope this fixes your issue.
Related
I am working on a quasar/vue app. I want to style the dialog popup within one component. I'm using scoped CSS, and if the CSS is not scoped, the style works. If the CSS is scoped, the CSS does not work. I only want to style this dialog in this one component.
The template code calling the dialog:
<div class="-nav">
<q-select
outlined
dense
v-model="select"
:options="options()"
behavior="dialog"
style="width: 100px"
/>
The CSS element is:
<style scoped>
.q-dialog__inner {
width: 400px;
background-color: red;
}
</style>
This does not work:
:deep(.q-dialog__inner) {
width: 400px !important;
background-color: red;
}
I noticed that the global quasar style is marked with !important
codepen: https://codepen.io/kiggs1881/pen/oNoOzEj
.q-dialog__inner > div {
width: 400px !important;
background-color: red !important;
}
hope it helps
Have you tried to put the parents class in front of the selector like this?:
(If have seen this here) and it worked for me inside an expansion item.
.q-dialog :deep(.q-dialog__inner) {
width: 400px !important;
background-color: red;
}
I think everything is provided in the quasar.dev documentation if that doesnt help try using on hover => funtion-To-Display-Popover-In-Specific-Component
there are many ways to counter this problem using scoped is not the only one
I have css below.
in myCss.css
.playlist { margin: 200 200; }
.playlist .channel { background: grey; }
and in JSX
import "./myCss.css"
.
.
render (){
return (
<div className="playlist" id="playlist">
</div>
)
}
It doesn't work. OK maybe I need some special way to JSX.
I googled around and found some ways like styled component.
However I want to use normal css way because some parameters like .playlist .channnel is generated by library in the <div className="playlist" id="playlist">.
So I can't change.
I want to stick with normal css in React and JSX.
Is it impossible???
Chances are your bundler is not loading the css file. If you are using Webpack, have a look at css-loader - https://webpack.js.org/loaders/css-loader/
Aside, styled-components is excellent, and you could use it along side your 'standard' css. You could define your 'standard' css using createGlobalStyle - https://styled-components.com/docs/api#createglobalstyle and use the styled api for everything else.
Maybe problem with
.playlist { margin: 200 200; }
First of all, you need to specify px. It becomes:
.playlist { margin: 200px 200px; }
Second of all, you remove second 200. Since it has no sense.
.playlist { margin: 200px; }
I am creating a ReactJs app, and am trying to apply styles. I load styles in the normal way (without webpack css modules):
import React, {Component} from 'react';
//styles
import './Header.css';
class Header extends Component {
render() {
return(
<div className='header'>
<h1>Save</h1>
</div>
);
}
}
The styles that I have for the header class apply, and everything is groovy. But for about 50% of my ReactJs files and their subsequent CSS files, the class styles do not apply. There is no error either, it finds the CSS and just doesn't apply the styles on some of the files.
I have no idea what is wrong, thanks!
EDIT 1
The header.css file:
.header {
width: 100%;
top: 0;
left:0;
text-align: right;
height: 100px;
margin: 0 auto;
}
.header h1 {
margin: 0;
margin-right: 40px;
cursor: pointer;
}
Edit 2
Example of class whose styles don't apply
Matrix.js:
import './Matrix.css';
render() {
const {users, selectedDivision} = this.state;
return(
<div className='container' style={{display:'grid', gridTemplateColumns:'200px 1fr'}}>
<div style={{textAlign: 'left'}}>
<input type='text' placeholder="Search Divisions" onChange={(e)=>this.search(e)} className='searchDivs'/>
<Scroller divisions={this.state.displayDivisions} handleSelectedDivisionChange={this.handleSelectedDivisionChange.bind(this)} />
</div>
<div style={{marginLeft: '10px'}}>
<Division division={selectedDivision} users={users} addToParentDivisions={this.handleNewUserAddedToDivision.bind(this)}/>
</div>
</div>
);
}
Here my work around has been to use inline styles but I want to try to avoid this as a best practice
Edit 3
Looking at dev tools in Chrome it shows that my css is not loaded because they are invalid property values?
So React is loading in the styles, but just refusing to display because they are invalid?
Just had the exact same problem!
Solution: Remove quotation marks (") around your property values.
Inline styles in JS require them but CSS does not.
I work in CSS every day I should've known this.
VSCode didn't pick it up either.
(Facepalm)
Assuming everything else is working properly like importing the right css file, using className, etc. I've found that, on rare occasions, something gets stuck in the browser cache and needs a full refresh.
Mac: Command+shift+R
Win: Ctrl+shift+R
I'm using Angular 2 , Angular Material and I am willing to display more data in a md-menu and, therefore, I need to set the max-width of the md-menu to a higher value. Its default value is of 280px.
<img src="/assets/images/ic-notifications.png" [mdMenuTriggerFor]="appMenu"/>
<md-menu #appMenu="mdMenu" [overlapTrigger]="false" yPosition="below" xPosition="before" class="notifications-dropdown">
<button md-menu-item >
<div class="row notification-row">
<div>
<span class="image-container"> Option 1 </span>
</div>
</div>
</button>
</md-menu>
In CSS file, I do this:
.mat-menu-panel.notifications-dropdown {
max-width:none;
width: 100vw;
margin-left: -8px;
margin-top: 24px;
overflow: visible;
}
.notification-row{
width: 424px;
}
In console, I can identify the class where the default value is set: max-width:280px; , and when I edit it in my console, it works perfectly, but even though I try to override it in my CSS code, I am not able to do that. I tried this, also:
.mat-menu-panel{
max-width: 600px;
}
And this:
.cdk-overlay-container .mat-menu-panel{
max-width:600px;
width: 100vw;
margin-left: -8px;
margin-top: 24px;
}
How can I override this default value?
Set the View Encapsulation to None on your component:
#Component({
templateUrl: './my.component.html' ,
styleUrls: ['./my.component.css'],
encapsulation: ViewEncapsulation.None,
})
Then in your component css you can do exactly what you tried:
.mat-menu-panel.notifications-dropdown {
max-width:none;
width: 100vw;
margin-left: -8px;
margin-top: 24px;
overflow: visible;
}
.notification-row{
width: 424px;
}
View Encapsulation = None means that Angular does no view
encapsulation. Angular adds the CSS to the global styles. The scoping
rules, isolations, and protections discussed earlier don't apply. This
is essentially the same as pasting the component's styles into the
HTML.
In some cases the wrapper over .mat-menu-panel can be .cdk-overlay-pane, in that case css should be something like this.
.cdk-overlay-pane.mat-menu-panel {
max-width: your_custom_value
}
Due to the css specificity rules, 2 classes of specificity are required in order to override the defaults.
The same crazy problem for me... how I solved:
::ng-deep .cdk-overlay-pane .mat-menu-panel {
max-width: 436px;
}
At component SASS file
See: Angular Component Styles - View Encapsulation
and issue comment by #gaiki https://github.com/angular/material2/issues/4462
I upgraded to Angular2 final release this morning and noticed that the CSS styles I was using in previous release candidates are no longer working. I need to control the look a HTML element wihtin a child component from the parent.
Here's my HTML:
<div id="intro">
<stm-video [video]="PageData.WelcomeVideo"></stm-video>
</div>
Here's my CSS:
:host ::shadow
{
stm-video
{
.video-container
{
height: 80vh;
width: inherit;
}
}
}
.video-container is a HTML element inside . I want to set the height of video-container when it's loaded in parent page. This used to work in Angular2 RC 4 and 5. Stopped working today after installing Angular2 final release.
Is there a more appropriate way to handle this?
Thank you Gunter and Clint. With your suggestions, here is what I arrived at for solving this problem (using LESS to generate CSS):
#deep: ~">>>";
:host
{
stm-video
{
#{deep}
{
.video-container
{
height: 80vh;
width: inherit;
}
}
}
}
having #{deep} directly under :host affects all child nodes, but putting it inside the child element just affects the styles within that child node (stm-video).
:host is still supported.
::shadow is not supported. As far as I know it never was.
::content is ignored.
/deep/ and >>> are equivalent and are both still supported.
:host >>> {
stm-video {
...
should do what you want.
See also Custom Styling on <ng-content> in angular2 not working ?
I think what you are looking for here is /deep/. It applies the styles down through child components. In your parent styles you would have.
/deep/ .video-container
{
height: 80vh;
width: inherit;
}