Khan / aphrodite

Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation
5.35k stars 188 forks source link

how to target classname in aphrodite #402

Open moezbenrebah opened 2 years ago

moezbenrebah commented 2 years ago

Hi there, I'm trying to use aphrodite to style my react web app, but I didn't figure out how to target classname within StyleSheet.create({}). I'm using this current example, so how can I target these classnames:

<>
  <component className="Foo">
    <childComponent className="Bar">
  </component>
</>
lmahistre commented 2 years ago

Hi, You have to use the 'css' function for this.

const styles = StyleSheet.create({
  Foo : {
    // ...some style
  },
  Bar : {
    // ...other style
  },
})

const Component = () => <>
  <component className={css(styles.Foo)}>
    <childComponent className={css(styles.Bar)}>
  </component>
</>
moezbenrebah commented 2 years ago

Hi, You have to use the 'css' function for this.

const styles = StyleSheet.create({
  Foo : {
    // ...some style
  },
  Bar : {
    // ...other style
  },
})

const Component = () => <>
  <component className={css(styles.Foo)}>
    <childComponent className={css(styles.Bar)}>
  </component>
</>

You mean within react file.