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

styles: first try of removing global eui styles #156

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from

Conversation

jusa3
Copy link
Collaborator

@jusa3 jusa3 commented Oct 25, 2024

With great help from @Pooya-Oladazimi we found a possible solution for global style injection and overwriting consuming app syles. Solves #144

We disabled the global style option in the Elastic UI Provider (EuiProvider) and created a wrapper with the missing styles from EuiProvider.

Applied to Autocomplete and DataContent widgets as a test.

What do you think of this implementation @Pooya-Oladazimi ?

@Pooya-Oladazimi
Copy link
Collaborator

@jusa3

Thanks for the quick implementation. It is nice. We just need to introduce a wrapper CSS class like ".sem-widget" and use that to narrow down the CSS file selectors. like instead of:
a{}
we use
.sem-widget a {}

so that we only change the anchor style inside the widgets and not globally.

@Pooya-Oladazimi
Copy link
Collaborator

@jusa3

one potential approach is to use another UI lib Material UI. especially because of this:
https://mui.com/material-ui/getting-started/usage/#globals

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

Successfully merging this pull request may close these issues.

2 participants