Styling Not Applying to Child Component

Styling not applying to child component

It's because by default components have view encapsulation (shadow dom). To disable this behavior, you can leverage the encapsulation attribute, as described below:

import {Component, ViewEncapsulation} from '@angular/core';
import {TestApp} from 'testapp.component.ts';
@Component({
  selector:'test-component',
  styleUrls: ['test.component.css'],
  templateUrl: './test.component.html',
  directives:[TestApp],
  encapsulation: ViewEncapsulation.None // <------
})
export class TestComponent{

}

See this plunkr: http://plnkr.co/edit/qkhkfxPjgKus4WM9j9qg?p=preview.

Why is my style not applied to my child component?

Try this:

const Card = props => {
  return (
    <View style={[styles.card, props.style ]}> {props.children}</View>
  );
};

Material UI: styled child component not applying css rules

styled causes a className prop to be passed to the wrapped component, but Child isn't passing the className prop along to Typography.

Here's an example of how to fix Child.tsx:

import { Typography } from "@mui/material";
import { FunctionComponent } from "react";

export const Child: FunctionComponent<{ className?: string }> = ({
  className
}) => {
  return <Typography className={className}>Child</Typography>;
};

Avoid css styles applying to child elements

CSS are meant to be inherited like that. If you want to "not inherit" you have a few options:

1. Best: improve your selectors so that they only apply to the elements you need them to
2. Good: if existing markup does not allow you to do the above, help by giving the element(s) that need to be styled an additional attribute (e.g. extra class) that allows you to improve the selectors
3. Bad: write your selectors so that they apply globally, then write more selectors to "undo" the results on a case by case basis

In your case, it looks like a combination of the first two would work. You can give an id="foo" to your table and then change the selector to

table#foo > tbody > tr { /*...*/ }

The > is the child selector, which prevents the style from being applied to table rows further down the element tree.

CSS From Parent Component Not Applying to Child Component Angular 9

You can prepend :host ::ng-deep to achieve this.

:host ::ng-deep button {
    color: red;
}

React: Inline styles not being applied in child component

Probably the issue is that in the Textarea component you're trying to read parentHeight and textareaHeight values from props, but in the Main component you're not passing these props down to the child Textarea.

How to style child components from parent component's CSS file?

Update - Newest Way

Don't do it, if you can avoid it. As Devon Sans points out in the comments: This feature will most likely be deprecated.

Last Update

From Angular 4.3.0 till even now (Angular 12.x), all piercing css combinators were deprecated. Angular team introduced a new combinator ::ng-deep as shown below,

DEMO : https://plnkr.co/edit/RBJIszu14o4svHLQt563?p=preview

styles: [
    `
     :host { color: red; }
     
     :host ::ng-deep parent {
       color:blue;
     }
     :host ::ng-deep child{
       color:orange;
     }
     :host ::ng-deep child.class1 {
       color:yellow;
     }
     :host ::ng-deep child.class2{
       color:pink;
     }
    `
],

template: `
      Angular2                                //red
      <parent>                                //blue
          <child></child>                     //orange
          <child class="class1"></child>      //yellow
          <child class="class2"></child>      //pink
      </parent>      
    `

---

Old way

You can use encapsulation mode and/or piercing CSS combinators >>>, /deep/ and ::shadow

working example : http://plnkr.co/edit/1RBDGQ?p=preview

styles: [
    `
     :host { color: red; }
     :host >>> parent {
       color:blue;
     }
     :host >>> child{
       color:orange;
     }
     :host >>> child.class1 {
       color:yellow;
     }
     :host >>> child.class2{
       color:pink;
     }
    `
    ],

template: `
  Angular2                                //red
  <parent>                                //blue
      <child></child>                     //orange
      <child class="class1"></child>      //yellow
      <child class="class2"></child>      //pink
  </parent>      
`

---

Related Topics