我们可以使用组件选择器模式styled-components添加上下文样式。但是我们如何选择特定的父组件变体来根据上下文设置子组件的样式呢?例如,我们这里有三个组件,、和。ChildNoteWrapperNote const Child = styled.div<{ editing?: boolean }>` ${props => props.editing && css`some styles`} ` const NoteWrapper = styl...
有了createGlobalStyle,全局样式就成为 React 组件树的一部分。虽然这看起来似乎不是一个很大的变更,但它可以动态更新、重新热加载和基于上下文主题化你的全局样式。 import { createGlobalStyle, ThemeProvider } from "styled-components"; // 可主题化和可更新的全局样式! const GlobalStyle = createGlobalStyle` html...
使用stylelint 检查我们的styled-components样式书写规范。 Styled Theming 语法高亮显示 在模板文本中写入CSS时丢失的一个东西是语法高亮显示。我们正在努力在所有编辑器中实现正确的语法高亮显示。支持大部分编辑器包括Visual Studio Code、WebStorm。 总结 下面简单总结一下 styled-components 在开发中的表现: 提出了 con...