Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

jsx-parser: Auto tag bind for styled-components styled CSS in JS

See original GitHub issue

CSS in JS, such as styled-components, emotion, and linaria, can map JSX tags to HTML tags through clever parsing.

const Button = styled.button`
  padding: 32px;
  background-color: hotpink;
  font-size: 24px;
  border-radius: 4px;
  color: black;
  font-weight: bold;
  &:hover {
    color: white;
  }
`;

export function CustomButton() {
  return <Button>This my button component.</Button>;
}

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:6 (6 by maintainers)

Top GitHub Comments

1reaction

YusukeHiraocommented, May 17, 2022

@petamoriken

Thank you for your information. I think may take a while but I will try it after I implement the pretenders option.

0reactions

petamorikencommented, May 16, 2022

Probably some kind of JSX(TSX) parser will have to be used.

Linaria and Compiled use Babel to parse and convert JSX(TSX) files to achieve Zero-runtime CSS in JS. This may be helpful for implementation. https://github.com/callstack/linaria/tree/master/packages/babel https://github.com/atlassian-labs/compiled/tree/master/packages/babel-plugin

Top Results From Across the Web

Basics - styled-components

Automatic critical CSS: styled-components keeps track of which components are ... Create a Title component that'll render an <h1> tag with some styles....

React Styled Components: Inline Styles + 3 Other CSS Styling ...

There's no one right way to style your React components. ... Inline styles are the most basic example of a CSS in JS...

Complete Guide On How To Use Styled-components In React

Let's now take a quick look at what styled-components is, and how it works which will get us acquainted with the styled-components syntax....

Using styled-components in TypeScript: A tutorial with examples

Styled-components is a CSS-in-JS library that enables you to write regular CSS and attach it to JavaScript components.

How To Use React Styled Components Efficiently - Copycat

Using styled-components makes it simple to use actual CSS to style components by writing JavaScript code. These components are known as “styled ......