StencilJS styling other components

Question

I have a simple component being called from another component that I was to add a margin value to.

Example:

Child component:

import { Component } from '@stencil/core';


@Component({
  tag: 'app-header',
  styleUrl: 'app-header.css',
  shadow: false
})
export class AppHeader {

  render() {
    return (
      <div class='app-header-component'>
        Hey I'm a header
      </div>
    );
  }
}

The parent component

import { Component } from '@stencil/core';

@Component({
  tag: 'app-home',
  styleUrl: 'app-home.css'
})
export class AppHome {

  render() {
    return (
      <div class='app-home'>
        <app-header></app-header>
      </div>
    );
  }
}

Parent component styles

// app-home.css

app-header {
    margin-top: 1rem;
}

How could I apply styles to a child component?

EDIT

I realized I can target the components child and then apply the styles.

// app-home.css

app-header {
    .app-header-component {
        margin-top: 1rem;
    }
}

score 1 · Answer 1 · answered Aug 12 '18 at 19:58

1

You might need to add to the child component:

// app-header.css
app-header {
  display: block;
}

By default, Custom Elements are display: inline, which probably is affecting your styling.

answered Aug 12 '18 at 19:58

matthewsteele

1,797
1
15
31

1

You're right that did work. I ended up just switching to use shadow dom with css variables seems to be the cleanest solution – Rodrigo Aug 13 '18 at 15:09

StencilJS styling other components

1 Answers1