fifthbeat / styled-stencils Goto Github PK

I'm using display: flex and appear not apply on elements.

Code example

const StyledIcon = styled.span`
  display: flex;
`;

Using div or span whethever, the result is the same.

My component

    return (
      <Host>
        <StyledIcon>
          <div>Column 1</div>
          <div>Column 2</div>
        </StyledIcon>
      </Host>
    );

Preview

For tests, adding display: flex; on dynamic created element

Hi! I'm trying to use as Prop -> documentation here <- but it doesn't work.

I have this StyledComponent:

export const Text = styled.div`
    color: #333333;
    font-size: 1.5rem;
`;

export class TheText {
	@Prop() text: string;
	@Prop() taghtml: string;

	render() {
		return (
			<Host>
				<Text as={this.taghtml}>{this.text}</Text>
			</Host>
		);
	}
}

I use TheText component:

<the-text text="Hi! I'm a text" taghtml="p"/>

And the DOM always show the tag: div

<the-text text="Hi! I'm a text" taghtml="p">
	<div>Hi! I'm a text</div>
</the-text>

While trying to create a button, I discovered that the following code won't render props to the styled component.

Stripped back code:

const Button = styled.button`
...
`

@Component({
	tag: 'my-button'
})

export class MyButton {
   @Prop() isDisabled?: boolean;
   
   render () {
      return (
         <Button disabled={this.isDisabled}></Button>
      )}
}

<my-button is-disabled></my-button>

When rendering the component, the attribute disabled isn't rendered on the element. On the host the is-disabled prop is visible.