1. 普通樣式
~~~
import { styled } from 'styled-components';
export const ArgLabel = styled.div`
position: relative;
height: 32px;
padding: 0 11px;
`
~~~
2. 有無className
~~~
import styled, { css } from 'styled-components';
export const HTMLEditorWrapper = styled.div.attrs<{
disabled: boolean;
}>({
className: 'wwc-html-editor-wrapper',
})`
${(props) => {
if (props.disabled) {
return css`
width: 100%;
position: relative;
overflow: hidden;
border: 1px solid #e7e7e7;
border-radius: 8px;
background-color: #ffff;
:global {
.monaco-mouse-cursor-text {
background-color: #0000000a;
cursor: not-allowed;
}
.minimap-decorations-layer {
background-color: #0000000a;
cursor: not-allowed;
}
.margin-view-overlays {
background-color: #0000000a;
cursor: not-allowed;
}
}
`;
} else {
return css`
width: 100%;
position: relative;
overflow: hidden;
border: 1px solid #e7e7e7;
border-radius: 8px;
background-color: #ffff;
`;
}
}}
`;
import { HTMLEditorWrapper } from './style';
<HTMLEditorWrapper disabled={disabled} />
~~~
3. antd樣式穿透
~~~
import { styled } from 'styled-components';
import { Tree } from 'antd'
export const MenuTree = styled(Tree)`
height: 350px;
overflow-x: hidden;
overflow-y: auto;
width: 100%;
&.sc-ant-tree-list {
.sc-ant-tree-treenode {
max-width: 180px;
min-width: 115px;
overflow: hidden;
white-space: pre - wrap;
}
}
/\* :global {
} \*/
`;
~~~
4. 全局樣式
~~~
import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle*
body {
margin: 0; padding: 0;
font-family: Arial, sans-serif;
}
function App() ?
return (<>
<GlobalStyle />
<div>My App</div>
</>
)
~~~
5. 動態渲染
~~~
import React from 'react';
import { Space, Tag } from 'antd';
import { styled } from 'styled-components';
interface TitleRenderProps {
data?: {
name?: string;
code?: string;
};
}
const StyledSpace = styled(Space)`
flex-wrap: wrap;
padding: 0 15px 15px 20px;
font-size: 14px;
`;
const StyledSpan = styled.span`
margin-right: 12px;
::after {
content: ':';
position: relative;
margin-block: 0;
margin-inline-start: 2px;
margin-inline-end: 8px;
}
`
export default (props: TitleRenderProps) => {
const { data } = props;
const { name, code } = data || {};
return (
<StyledSpace >
<StyledSpan>已選動態參數</StyledSpan>
{name ? (
<>
<Tag color="processing" style={{ fontSize: 12 }}>
{name}
</Tag>
<span style={{ color: 'rgba(0,0,0,0.25)' }}>{code}</span>
</>
) : (
<span style={{ color: 'rgba(0,0,0,0.25)' }}>暫未選擇</span>
)}
</StyledSpace>
);
};
~~~
