本文整理汇总了TypeScript中styled-components.div.withConfig方法的典型用法代码示例。如果您正苦于以下问题：TypeScript div.withConfig方法的具体用法？TypeScript div.withConfig怎么用？TypeScript div.withConfig使用的例子？那么恭喜您, 这里精选的方法代码示例或许可以为您提供帮助。您也可以进一步了解该方法所在类styled-components.div的用法示例。
在下文中一共展示了div.withConfig方法的5个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1:
import styled from 'styled-components';
export const Container = styled.div.withConfig({ componentId: 'main-tool-container' })`
display: flex;
flex-grow: 1;
height: 100%;
.ant-tabs {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.ant-tabs-content {
flex-grow: 1;
}
.ant-tabs-nav .ant-tabs-tab {
padding: 10px 16px;
}
.ant-tabs-bar {
margin-bottom: 0;
height: 40px;
min-height: 40px;
}
`;
export const ScrollContainer = styled.div`
display: block;
overflow-x: hidden;
overflow-y: auto;
height: 100%;
width: 300px;
`;示例2:
}
`;
const ViewportContainerBoxAndPreviewContainer = css`
display: flex;
position: relative;
flex-basis: 0%;
flex-grow: 1;
${(props: any) =>
props.theme.hidden &&
`
display: none;
`};
`;
export const Container = styled.div.withConfig({ componentId: 'Container' })`
display: flex;
width: 100%;
height: 100%;
overflow: hidden;
`;
export const LeftContainer = styled.div.withConfig({ componentId: 'LeftContainer' })`
display: flex;
flex-direction: column;
flex-grow: 1;
width: 0;
`;
export const RightContainer = styled.div.withConfig({ componentId: 'RightContainer' })`
display: flex;示例3:
import styled from 'styled-components';
export const Container = styled.div.withConfig({ componentId: 'tree-container' })`
display: flex;
flex-direction: column;
width: 100%;
`;
示例4: rotate
import styled from 'styled-components';
export const Container = styled.div.withConfig({ componentId: 'tree-node-container' })`
flex-grow: 1;
`;
export const Title = styled.div`
cursor: pointer;
display: flex;
user-select: none;
font-size: 14px;
color: #666;
flex-grow: 1;
align-items: center;
`;
export const TitleCaret = styled.div`
width: 15px;
height: 15px;
margin-right: 5px;
padding-left: 5px;
display: flex;
justify-content: center;
align-items: center;
fill: #666;
transition: all 0.2s;
${(props: any) =>
props.themes.down &&
`
transform: rotate(90deg);
`};示例5:
import styled from 'styled-components';
const activeBorderColor = '#35b8d6';
export const Container = styled.div.withConfig({ componentId: 'plugin-tree-node-container' })`
display: flex;
background-color: #eee;
color: #666;
font-size: 14px;
`;
export const Content = styled.div.withConfig({ componentId: 'plugin-tree-node-content' })`
display: flex;
flex-grow: 1;
align-items: center;
height: 30px;
justify-content: space-between;
border-bottom: 1px solid #ddd;
transition: border-right-color 0.3s;
border-right: 3px solid transparent;
&:hover {
border-right-color: ${activeBorderColor};
}
${(props: any) =>
props.theme.editted &&
`
border-right-color: ${activeBorderColor};
`};
`;
export const Title = styled.div`