Skip to content

Instantly share code, notes, and snippets.

@mxstbr
Last active August 24, 2021 20:26
Show Gist options
  • Save mxstbr/c0961900465e2cf51d4a0f56c392e1aa to your computer and use it in GitHub Desktop.
Save mxstbr/c0961900465e2cf51d4a0f56c392e1aa to your computer and use it in GitHub Desktop.
styled-components ❤ tachyons
// There's two ways to use Tachyons together with styled-components
// Both are valid, which one you use depends if you want to always apply a tachyons class when a certain component
// is rendered or if you want to apply it for specific instances.
// 1. Use .attrs to define classNames that should always be applied to a styled component
// Whenever you use <Component /> now it'll have both the styled-components as well as the Tachyons class
// See the docs for more info: https://www.styled-components.com/docs/basics#attaching-additional-props
const Component = styled.div.attrs({
className: 'bw0-l',
})`
color: blue;
`
<Component /> // has bw0-1 class applied!
// 2. Use the Tachyons className in the JSX
// styled-components doesn't force you to not use any classes so this works like with any other component
const Component = styled.div`
color: blue;
`
// Add the Tachyons class when you render the component
<Component className="bw0-1" />
@parwatcodes
Copy link

parwatcodes commented Feb 16, 2018

Hey, I created two separate files. a component and a style file

Home.js

import React, { Component } from "react";
import { Article, Image, Main, Title, P } from "../../styledComponents";

class Home extends Component {
  render() {
    return (
      <Main>
        <Article>
          <div className="tc">
            <Image
              src="http://tachyons.io/img/avatar_1.jpg"
              title="Photo of a kitty staring at you"
              alt="dddsd"
            >
              Parwat Kunwar
            </Image>
            <Title>Dayahang rai</Title>
          </div>
          <P>k cha ho maiya</P>
        </Article>
      </Main>
    );
  }
}

export default Home;

style.js

import styled from "styled-components";

export const Main = styled.main.attrs({
  className: "center w-50 sans-serif"
});

export const Article = styled.article.attrs({
  className: "w-100 bb b--black-05 pb2 mt2 flex items-center justify-between"
});

export const Image = styled.img.attrs({
  className: "ba b--black-10 db br-100 w2 w3-ns h2 h3-ns mr2"
});

export const Title = styled.title.attrs({
  className: "f6 f5-ns fw6 lh-title black mv0"
});

export const P = styled.p.attrs({
  className: "lh-copy measure center f6 black-70"
});

But nothing is rendered and an error is thrown instead! Any Help
deepinscreenshot_select-area_20180216235416

@jikkujose
Copy link

jikkujose commented Feb 22, 2018

You need to add an empty string literal at the end of the function like so:

export const Main = styled.main.attrs({
  className: "center w-50 sans-serif"
})``
//^^

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment