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.

Expose locally scoped variables as props

See original GitHub issue

Describe the solution you’d like Allow locally scoped variables to be customised through props.

const AspectRatio = styled("div", {
    $$ratio: 1,
    aspectRatio: "$$ratio",
      
    "@supports not (aspect-ratio: 1 / 1)": {
        "&::before": {
            float: "left",
            paddingTop: "calc(100% / $$ratio)",
            content: "",
        },
        "&::after": {
            display: "block",
            content: "",
            clear: "both",
        }
    }
})

<AspectRatio ratio={16 / 9} /> // instead of
<AspectRatio css={{ $$ratio: 16 / 9 }} />

I think it would make the api a little more intuitive and avoid needing to spread the css props when overriding in custom components.

Issue Analytics

State:
Created 2 years ago
Reactions:2
Comments:5 (3 by maintainers)

Top GitHub Comments

2reactions

csantos1113commented, Aug 11, 2021

I think this could be resolved by https://github.com/modulz/stitches/pull/721 whenever ~, and IF,~ it gets merged

1reaction

peduartecommented, Aug 9, 2021

Hey, thanks for sharing this idea.

Currently, only variants are exposed as props. I’m curious, with this approach, how would the user differentiate a locally scoped variable from a variant?

Top Results From Across the Web

Expose locally scoped variables as props · Issue #704 - GitHub

Describe the solution you'd like Allow locally scoped variables to be customised through props. const AspectRatio = styled("div", ...

Getting All Variables In Scope - javascript - Stack Overflow

If you have all local variable names so you have scope variables. With the variable names you have access to values with a...

CSS Variables for React Devs - Josh W Comeau

CSS Variables are *really* cool, and they're incredibly powerful when it comes to React! This tutorial shows how we can use them with...

State Management within React Functional Components with ...

They must be “scoped” locally via useState()/useReducer() and useContext(). props. It is important to remember that props, passed in as function arguments from ......

Hooks FAQ - React

Do Hooks replace render props and higher-order components? ... also allows you to handle out-of-order responses with a local variable inside the effect:....