javascript - 如何在 React Shadow Root 中应用样式？

Question

我使用 React Shadow Root，每个组件都有自己的样式，我该如何应用这些样式？

class Main extends React.Component {
    render() {
        return (
            <ReactShadowRoot>
                <Header/>
                <Content/>
                <Footer/>
            </ReactShadowRoot>
        )
    }
}

const app = document.createElement('div');
document.body.appendChild(app);
ReactDOM.render(<Main />, app);

标签： javascriptcssreactjs

Answer 1

试试 styled-components 包： NPM 包

import styled from 'styled-components';

const HeaderWithStyle = styled(Header)`
  background: red;
`;