Styling shadow dom. - Githubissues

flo-pereira commented 5 years ago

Hi, better than explain, let me show you.

What's happening:

What I expected:

Environment information:

"@emotion/core": "^10.0.10", "@emotion/styled": "^10.0.11", "react": "^16.8.6", "react-dom": "^16.8.6",

How can I use emotion/styled inside Webcomponents shadow dom.

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

class XComponent extends HTMLElement {
  connectedCallback() {
    const mountPoint = document.createElement('div');
    this.attachShadow({ mode: 'open' }).appendChild(mountPoint);

    ReactDOM.render(<App />, mountPoint);
  }
}

customElements.define('x-component', XComponent);

// App.js
import React from 'react';
import styled from '@emotion/styled';

function App() {
  return <StyledComponent>ok</StyledComponent>;
}

export default App;

const StyledComponent = styled.div`
  background: red;
`;

// index.html

<!DOCTYPE html>
<html lang="en">
  <body>
    <x-component></x-component>
  </body>
</html>

diffidentDude commented 5 years ago

Hey,

According to the docs, you need to use createEmotion or createCache and assign a container for emotion to render your styles into.

flo-pereira commented 5 years ago

thanks @diffidentDude, it does the trick !! 👍

cihangir-mercan commented 1 year ago

it worked for me too. working example:

`export default function Portfolio() {

const muiRef = useRef(null);

// Declare a new state variable, which we'll call "count"
const [refCurr, setRefCurr] = useState(null);

useEffect(() => {
    setRefCurr(muiRef.current);
}, []);

return (
    <div ref={muiRef} style={{height: '650px'}}>
        <CacheProvider value={createCache({
            key: 'aaa',
            prepend: true,
            container: refCurr,
        })}>
            <Box sx={{ width: '100%' }} >
                <DataGridPro
                    autoHeight
                    treeData
                    rows={rows}
                    columns={columns}
                    getTreeDataPath={getTreeDataPath}
                    rowThreshold={0}
                    getDetailPanelContent={getDetailPanelContent}
                    getDetailPanelHeight={getDetailPanelHeight}
                    hideFooter
                />
            </Box>
        </CacheProvider>
    </div>
);

} `

emotion-js / emotion

Styling shadow dom. #1366