TypeScript react-emotion.default函數代碼示例

    export interface DetailedHTMLProps<T, U> {}
    export interface HTMLAttributes<T> {}
}
export = React;
export as namespace React;
// @filename: node_modules/create-emotion-styled/types/react/index.d.ts
/// <reference types="react" />
declare module 'react' { // augment
    interface HTMLAttributes<T> {
        css?: unknown;
    }
}
export interface StyledOtherComponentList {
    "div": React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
}
export interface StyledOtherComponent<A, B, C> {}

// @filename: node_modules/create-emotion-styled/index.d.ts
export * from "./types/react";

// @filename: node_modules/react-emotion/index.d.ts
import {StyledOtherComponent, StyledOtherComponentList} from "create-emotion-styled";
export default function styled(tag: string): (o: object) => StyledOtherComponent<{}, StyledOtherComponentList["div"], any>;

// @filename: index.ts
import styled from "react-emotion"

const Form = styled('div')({ color: "red" })

export default Form

/*
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 *
 */

import styled from 'react-emotion';

export const MODAL_ACCENT = 'rgba(255, 234, 194, 0.4)';
export const MODAL_HIGHLIGHT_STRONG = 'rgba(255, 234, 194, 0.2)';
export const MODAL_HIGHLIGHT_WEAK = 'rgba(255, 234, 194, 0.0)';

export const ModalContainer = styled('div')`
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
`;

export const ModalButtonContainer = styled('div')`
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  margin: auto;

/*
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 *
 */

import styled from 'react-emotion';

export const PATCH_NOTES_COLOR = 'rgba(122, 184, 227, 1)';
export const NEWS_COLOR = 'rgba(236, 119, 127, 1)';

export const FeaturedContainer = styled('div')`
  position: relative;
  width: calc(100% - 10px);
  height: 500px;
  right: -5px;
  background-color: #101010;
  border: 1px solid #2E2E2E;
  display: flex;
  overflow: hidden;
  padding: 20px 0;
  margin-bottom: 10px;
  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(16, 16, 16, 0.5) 10%,
      rgba(16, 16, 16, 1) 60%
    ),
    linear-gradient(

/*
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

import styled, { css } from 'react-emotion';

export const HUDEditorContainer = styled('div')`
  position: fixed;
  width: 200px;
  height: 35%;
  overflow-x: hidden;
  overflow-y: hidden;
  color: white;
  background-color: gray;
  background: url(images/progression/progress-bg-grey.png) no-repeat;
  border: 2px solid #6e6c6c;
  box-shadow: 0 0 30px 0 #000;
  z-index: 942;
`;

export const HUDEditorTitle = styled('div')`
  position: relative;
  z-index: 1;
  padding-left: 4px;
  div.editorDragHandle {
    width: 100%;
    cursor: move;
  }
  div.resetHUDButton {

    position: absolute;
    left: 0;
    right: 0;
    bottom: 5px;
    opacity: 0;
    height: 85%;
    width: 85px;
    background: linear-gradient(transparent, rgba(255,255,255,0.2));
    clip-path: polygon(80% 0%, 100% 0%, 20% 100%, 0% 100%);
    -webkit-clip-path: polygon(80% 0%, 100% 0%, 20% 100%, 0% 100%);
    -webkit-animation: ${shine} 0.5s ease forwards;
    animation: ${shine} 0.5s ease forwards;
  }
`;

export const ButtonGlow = styled('div')`
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(rgba(255,255,255,0.8), transparent, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
`;

export const ButtonText = styled('div')`
  display: flex;
  align-items: center;
  justify-content: center;

/*
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

import styled from 'react-emotion';
import * as CSS from 'lib/css-helper';

export const PopupDialog = styled('div')`
  position: absolute;
  ${CSS.IS_COLUMN}
`;

export const Container = styled('div')`
  ${CSS.IS_COLUMN} ${CSS.EXPAND_TO_FIT}
  padding: 20px;
  overflow: auto;
  padding-top: 0;
`;

/*
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 *
 */

import styled from 'react-emotion';
import * as CONFIG from 'UI/config';

export const Container = styled('div')`
  margin-top: 20px;
  height: 100px;
  text-align: center;
  color: #e9d5bd;
  font-family: TitilliumWeb;
  font-size: 18px;
  margin: 30px 150px 0px 150px;
`;

export const InputContainer = styled('div')`
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  position: absolute;
  bottom: 20px;
  left: 250px;
`;