Dynamic inline styles / inline runtime conditions

[raineorshine]

I'm looking for the best way to add runtime conditions to inline styles. That is, I want to apply a style or set of styles, defined inline, based on a runtime condition.

(The reason is that I want to avoid having to define an additional variable. The app is a custom editor with a lot of ad hoc styles. I value co-location and I see a separate style definition as imposing an additional naming burden and coupling that needs to be maintained. Maybe this isn't very panda-like, but I'm still curious if there is a way to do it, or if it is even worth it.)

I have read the documentation on dynamic styling, and from what I can tell there are only two methods of defining inline styles that respond to runtime conditions. Both have their downsides, as described below.

Am I missing something? Is there a better way to do this that does not require a separate named variable? Thanks!

Runtime condition

https://panda-css.com/docs/guides/dynamic-styling#runtime-conditions

The documentation repeatedly says this is not recommended, though it is closest to what I want. Is this worse than using React's style={...}?

function MyComponent({ foo }) {
  return <div className={css({
    marginLeft: foo ? '10px' : '20px'
  })}>Hello world</div>
}

Data attribute

I can apply a data attribute inline at runtime, but it's more verbose and I lose type safety on the data attribute name:

function MyComponent({ foo }) {
  return <div 
    data-foo={foo}
    className={css({
      marginLeft: '20px',
      '&[data-foo="bar"]': {
        marginLeft: '10px'
      }
    })}
  >Hello world</div>
}

[anubra266]

@raineorshine I'd suggest the style attribute if you need lots of dynamic styles