本文整理匯總了TypeScript中@emotion/core.css函數的典型用法代碼示例。如果您正苦於以下問題：TypeScript css函數的具體用法？TypeScript css怎麽用？TypeScript css使用的例子？那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。
在下文中一共展示了css函數的5個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: css
import { css } from '@emotion/core';
export const AppStyles = {
flex: css({
flex: '1 1 auto',
}),
margin0: css({
margin: 0,
}),
};
示例2: color
body: "Cabin",
header: "Arvo",
sans: "Cabin",
serif: "Arvo",
mono: "PT Mono",
},
colors: {
link: "coral",
background: color("mediumseagreen").darken(0.06).string(),
lightBackground: "snow",
darkBackground: "darkslategray",
lightText: "snow",
darkText: color("darkslategray").darken(0.5).fade(0.15).string(),
teal: "rgb(0, 190, 166)",
},
from(key: string, values: any[]): any {
return values.map((x) => theme[key][x])
},
}
theme.mediaQueries = theme.breakpoints.map((w) =>
w === "52em" ? `@media print, (min-width: ${w})` : `@media(min-width: ${w})`
)
const mqBase = facepaint(theme.mediaQueries)
export const mq = (style: Interpolation) =>
mqBase(themed(theme, style))
export const fullWidthClass = css(mq({ width: theme.fullWidth }))
export default theme
示例3: css
export const globalStyles = css({
html: {
height: "100%",
width: "100%",
},
body: {
"@media screen": {
backgroundColor: theme.colors.background,
color: theme.colors.darkText,
},
fontFamily: theme.fonts.body,
},
"h1,h2,h3,h4,h5,header": {
fontFamily: theme.fonts.header,
"&:first-of-type": {
marginTop: 0,
},
"&:only-child": {
marginBottom: 0,
}
},
"@page": {
size: "auto",
margin: 0,
},
"main a": {
color: "inherit",
textDecoration: "none",
borderBottom: `2px dashed ${theme.colors.link}`,
transition: `all ${theme.transitionTime}`,
"&:hover, &:active": {
// borderBottomColor: "transparent",
color: theme.colors.link,
},
},
blockquote: {
borderLeftColor: theme.colors.link,
borderLeftStyle: "solid",
fontStyle: "italic",
backgroundColor: "lavenderblush",
color: color(theme.colors.darkText).fade(0.1).string(),
},
code: {
border: `1px solid ${theme.colors.link}`,
padding: 5,
borderRadius: 3,
...contrastBackground("seashell"),
"&.dark": contrastBackground(theme.colors.darkText),
}
})示例4: color
)
export const size = (value: number | string | any[]) => (
{ width: value, height: value }
)
export const contrastBackground = (value: string) => {
const bg = color(value)
const fg = bg.isDark() ? theme.colors.lightText : theme.colors.darkText
return {
backgroundColor: value,
color: fg,
}
}
export const fillParent = css(size("100%"))
export const flex = {
box: css({ display: "flex" }),
column: css({
display: "flex",
flexDirection: "column",
}),
row: css({
display: "flex",
flexDirection: "row",
}),
wrap: css({ flexWrap: "wrap" }),
alignCenter: css({ alignItems: "center" }),
alignEnd: css({ alignItems: "flex-end" }),
justifyBetween: css({ justifyContent: "space-between" }),示例5: css
export const GlobalStyle = css(`
body, html {
background: ${Colors.bodyBgColor};
}
.app-slideshow {
background-color: inherit;
.carousel .slide {
background-color: inherit;
}
.carousel .slide .legend {
background-color: inherit;
}
.carousel .control-dots {
background-color: #f4f7f8;
}
}
code {
white-space: pre-wrap;
}
.link-plain {
background: none;
}
.alignleft {
float: left;
margin: 0 15px 8px 0;
box-shadow: 0 2px 4px 0 rgba(14,30,37,.12);
border-radius: 8px;
}
.alignright {
float: right;
margin: 0 0 8px 15px;
box-shadow: 0 2px 4px 0 rgba(14,30,37,.12);
border-radius: 8px;
}
.headroom--unpinned {
transition: none !important;
}
p small {
font-size: .875em;
font-weight: 400;
}
.header-title {
color: #fff;
font-family: Arvo;
font-weight: bold;
text-shadow:
-3px -3px 0 #222,
3px -3px 0 #222,
-3px 3px 0 #222,
3px 3px 0 #222,
4px 4px 0 #fff,
5px 5px 0 #fff,
6px 6px 0 #fff,
7px 7px 0 #fff;
line-height: 0.8em;
letter-spacing: 0.1em;
transform: scaleY(0.7);
margin: 4px 0 0 0;
text-align: center;
}
.header-script {
font-family: "Seaweed Script";
color: #fff;
text-align: center;
font-size: 40px;
position: relative;
margin:0;
}
.header-script span {
background-color: #222;
padding: 0 0.3em;
}
.header-script:before {
content:"";
display: block;
position: absolute;
z-index:-1;
top: 50%;
width: 100%;
border-bottom: 3px solid #fff;
}
/* Image overlay */
.image-overlay::before {
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(44, 51, 64, 0.8);
}
/* Zoom In */
.hover-zoom-in img {
transform: scale(1);
transition: 0.3s ease-in-out;
}
.hover-zoom-in:hover img {
transform: scale(1.2);
//.........這裏部分代碼省略.........