how to target classname in aphrodite

[moezbenrebah]

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]

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]

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.