Skip to content

chore: use emotion for styling (pt. 5) #10261

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

Merged
merged 37 commits into from
Oct 16, 2023
Merged

chore: use emotion for styling (pt. 5) #10261

merged 37 commits into from
Oct 16, 2023

Conversation

aslilac
Copy link
Member

@aslilac aslilac commented Oct 13, 2023

Part of #9924
Following #10149

Progress 56_0

From starting with 157 usages of makeStyles across 154 files, this changes brings us down to 69 usages across as many files.

@aslilac aslilac marked this pull request as ready for review October 16, 2023 16:46
@aslilac aslilac requested review from a team, BrunoQuaresma, Kira-Pilot and Parkreiner and removed request for a team October 16, 2023 16:46
Copy link
Collaborator

@BrunoQuaresma BrunoQuaresma left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the stories are ok, I'm ok! 👍

@aslilac aslilac merged commit eaea918 into main Oct 16, 2023
@aslilac aslilac deleted the emotional-damage-5 branch October 16, 2023 18:41
@github-actions github-actions bot locked and limited conversation to collaborators Oct 16, 2023
@aslilac aslilac linked an issue Oct 16, 2023 that may be closed by this pull request
Copy link
Member

@Parkreiner Parkreiner left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry – wasn't able to finish the review until now. Everything looks good as usual – just had some Emotion questions

},
},
const styles = {
root: (theme) => css`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a question for my own understanding: is there a difference between an interpolation function returning an object, vs a tagged css template literal? Is the main use case to enable the & selectors, or would something like this still be possible via object syntax?

const styles = {
  "&:hover": (theme) => ({
    background-color: ${theme.palette.background.paper};
  })
};

Stacktrace
<CopyButton
buttonClassName={styles.copyButton}
buttonClassName={css`
Copy link
Member

@Parkreiner Parkreiner Oct 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think there's some nuance that I'm missing. Is there anything stopping this style from being defined outside the component, and being defined via the interpolation function syntax that some of the other styles are using?

I don't expect it to matter much performance-wise – just curious

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Replace makeStyles
3 participants