Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Style composition - Allow sx prop to accept arrays #174

Closed
wants to merge 4 commits into from

Conversation

phelma
Copy link

@phelma phelma commented Jul 10, 2019

Emotion's css prop can accept an array for style composition.

This adds the functionality to theme-ui's sx prop

Styles can be composed by using an array of style objects in the sx prop.

e.g.

import React from 'react'
import { css } from 'theme-ui'

const base {
  backgroundColor: 'background',
  color: 'primary'
}

const danger = {
  color: 'red'
}

export default props => (
  <div>
    <div sx={base}>This will be the primary color</div>
    <div sx={[danger, base]}>
      This will be also be primary since the base styles
      overwrite the danger styles.
    </div>
    <div sx={[base, danger]}>This will be red</div>
  </div>
)

@phelma phelma closed this Jul 15, 2019
@phelma
Copy link
Author

phelma commented Jul 15, 2019

Hi @jxnblk I have updated the PR following your feedback

@phelma phelma reopened this Jul 15, 2019
@jxnblk
Copy link
Member

jxnblk commented Jul 15, 2019

Thanks! Was traveling over the weekend, but planning on merging this. As a heads up, #182 looks like it might cause merge conflicts, but I can take care of them

@phelma
Copy link
Author

phelma commented Sep 25, 2019

hey @jxnblk do we need to do anything more with this PR to get it in?

@domtronn

This comment has been minimized.

@lachlanjc
Copy link
Member

Any update here? This looks awesome.

@jonavila
Copy link

@jxnblk Any plans on adding the functionality of this PR? I've been relying on Emotion's css prop for style composition with arrays, but the would like to avoid the extra step of wrapping my style object with the css function.

@RobStallion
Copy link

@jxnblk Is there any news on this PR? Would be a pretty handy feature to have.

@atanasster
Copy link
Collaborator

@RobStallion - it is my understanding @jxnblk is not currently very active on this project and @hasparus is heading an effort to move things along while Brent is busy - mostly to close the backlog of issues and PRs.
I didn't know this PR existed and since there were new issues asking for this feature, submitted a very similar PR in #1226 ( we can also try to resolve the conflicts on the PR here) - can you jump in with some comments and let's try to merge this feature merged.

@lachlanjc lachlanjc added the enhancement New feature or request label Dec 3, 2020
@lachlanjc
Copy link
Member

Closing with #704 as a successor

@lachlanjc lachlanjc closed this Dec 6, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants