https://github.com/danilowoz/my-styled-component

💅 My own implementation of styled-components within 100 lines of code.
https://github.com/danilowoz/my-styled-component

Last synced: 5 months ago
JSON representation

💅 My own implementation of styled-components within 100 lines of code.

• Host: GitHub
• URL: https://github.com/danilowoz/my-styled-component
• Owner: danilowoz
• Created: 2019-07-22T21:41:45.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2021-12-27T23:19:38.000Z (about 4 years ago)
• Last Synced: 2025-07-21T19:46:42.349Z (6 months ago)
• Language: JavaScript
• Homepage:
• Size: 295 KB
• Stars: 10
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# my-styled-component

💅 My own implementation of styled-components within 100 lines of code.

## Usage

```jsx

const SECTION_WIDTH = 400;

const Section = styled.section`

  width: ${SECTION_WIDTH}px;

`;

const Bold = styled.strong`

  font-weight: bold;

`;

const Text = styled.p`

  color: ${props => props.color};

  font-size: 16px;

  text-align: center;

  ${({ active }) =>

    active &&

    css`

      text-decoration: underline;

      text-transform: ${({ color }) => {

        return color === "red" ? "uppercase" : "none";

      }};

    `}

  strong,

  span {

    color: #000;

    font-weight: normal;

  }

  ${Bold} {

    font-size: 20px;

  }

`;

   Foo Foo strong

```

## Dependencies

- `html-tags`: List of standard HTML tags;

- `stylis`: light–weight css preprocessor;