Skip to content

danilowoz/my-styled-component

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 

my-styled-component

πŸ’… My own implementation of styled-components within 100 lines of code.

Usage

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;
  }
`;

<Section as="p">
   <Text color="red">Foo <strong>Foo <Bold>strong</Bold></strong></Text>
</Section>

Dependencies

  • html-tags: List of standard HTML tags;
  • stylis: light–weight css preprocessor;

About

πŸ’… My own implementation of styled-components within 100 lines of code.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published