• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript styled-components.default函数代码示例

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文整理汇总了TypeScript中styled-components.default函数的典型用法代码示例。如果您正苦于以下问题:TypeScript default函数的具体用法?TypeScript default怎么用?TypeScript default使用的例子?那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。



在下文中一共展示了default函数的10个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: render

import styled from 'styled-components';


interface SectionProps {
  children?: React.ReactChild,
  className?: string,
}


class Section extends React.Component<SectionProps, {}> {
  render() {
    return <div className={this.props.className}>
      {this.props.children}
    </div>;
  }
}


const StyledSection = styled(Section)`
  width: 100vw;
  height: 100vh;
  background: #2A2C39;

  display: flex;
  justify-items: center;
  align-items: center;
`;


export default StyledSection;
开发者ID:dylanpyle,项目名称:dotfiles,代码行数:30,代码来源:typescript.ts


示例2: styled

 *  License, or (at your option) any later version.
 *
 *  This program is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU Affero General Public License for more details.
 *
 *  You should have received a copy of the GNU Affero General Public License
 *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

import styled from 'styled-components';
import TableSortLabel from '@material-ui/core/TableSortLabel';
import { COLOR, FONT_WEIGHT } from '../../../../../styles';

export const SortLabel = styled(TableSortLabel) `
	height: 18px;

	&& {
		flex-direction: row-reverse;
		margin-left: ${({ active }) => active ? 0 : '-5px'};
		color: ${COLOR.BLACK_60};
		font-size: 14px;
		font-weight: ${FONT_WEIGHT.SEMIBOLD}
	}

	&::before {
		width: 18px;
		height: 18px;
		left: -2px;
		border-radius: 100%;
开发者ID:3drepo,项目名称:3drepo.io,代码行数:31,代码来源:tableHeading.styles.ts


示例3: styled

 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU Affero General Public License for more details.
 *
 *  You should have received a copy of the GNU Affero General Public License
 *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

import styled from 'styled-components';
import { COLOR } from './../../../../styles/colors';
import { Field } from 'formik';
import { CustomTable } from '../../../components/customTable/customTable.component';
import FormControl from '@material-ui/core/FormControl';
import TableCell from '@material-ui/core/TableCell';

export const StyledField = styled(Field)`
	margin-right: 10px;
`;

export const SelectWrapper = styled(FormControl)`
	&&:not(:first-child) {
		margin-top: 15px;
	}
`;

export const FieldWrapper = styled(FormControl)``;

export const StyledCustomTable = styled(CustomTable)`
	width: 100%;
`;
开发者ID:3drepo,项目名称:3drepo.io,代码行数:30,代码来源:modelDialog.styles.ts


示例4: styled

 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU Affero General Public License for more details.
 *
 *  You should have received a copy of the GNU Affero General Public License
 *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

import styled from 'styled-components';
import Popper from '@material-ui/core/Popper';
import { COLOR } from '../../../styles/colors';
import { TextField } from '../textField/textField.component';

export const Container = styled.div``;

export const StyledTextField = styled(TextField)`
	&& {
		margin: 8px 0;
	}
`;

export const SuggestionsList = styled(Popper)`
	z-index: 1;
	margin-top: -15px;

	.react-autosuggest__suggestions-list {
		max-height: 250px;
		overflow: auto;
		padding-left: 0;
	}
开发者ID:3drepo,项目名称:3drepo.io,代码行数:30,代码来源:autosuggestField.styles.ts


示例5: styled

 *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

import styled from 'styled-components';
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';

import { COLOR } from '../../../styles';

export const Title = styled.div`
	font-size: 14px;
	color: ${COLOR.BLACK_20};
`;

export const StyledTextField = styled(TextField) `
	font-size: 14px;
	margin-bottom: 12px;
`;

export const StyledTextFieldContainer = styled(Grid) `
	flex: 1;
`;

export const SaveButton = styled(Button) `
	&& {
		width: 100%;
		margin-top: 16px;
	}
`;
开发者ID:3drepo,项目名称:3drepo.io,代码行数:30,代码来源:newJobForm.styles.ts


示例6: styled

 *  License, or (at your option) any later version.
 *
 *  This program is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU Affero General Public License for more details.
 *
 *  You should have received a copy of the GNU Affero General Public License
 *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

import styled from 'styled-components';
import Icon from '@material-ui/core/Icon';
import { MuiTheme } from '../../../styles';

export const IconContainer = styled(Icon).attrs({
	classes: {
		colorSecondary: 'secondary',
		colorPrimary: 'primary'
	}
})`
	&& {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: inherit;
	}

	svg {
		fill: currentColor;
	}
开发者ID:3drepo,项目名称:3drepo.io,代码行数:31,代码来源:fontAwesomeIcon.styles.ts


示例7: styled

import styled from 'styled-components';

import { Menu } from 'antd';

export const Brand = styled.div`
    font-family: 'Berkshire Swash', cursive;
    text-align: left;
    font-size: 26px;
`;

export const Img = styled.img`
    margin-right: 15px;
    margin-bottom: 6px;
`;
export const RightMenuItem = styled(Menu.Item)`
    float: right !important;
`;
开发者ID:MayGo,项目名称:backer-timetracker,代码行数:17,代码来源:TrayMenu.styles.ts


示例8: styled

import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import InputLabel from '@material-ui/core/InputLabel';
import FormControl from '@material-ui/core/FormControl';
import Button from '@material-ui/core/Button';
import { Form } from 'formik';

import { COLOR } from '../../styles';

export const Container = styled.div`
	height: 100%;
`;

export const StyledTextField = styled(TextField)``;

export const StyledSelectField = styled(Select)``;

export const StyledSelectItem = styled(MenuItem)``;

export const StyledInputLabel = styled(InputLabel)``;

export const StyledFormControl = styled(FormControl)`
	width: 100%;

	&& {
		margin-top: 16px;
		margin-bottom: 8px;
	}
`;
开发者ID:3drepo,项目名称:3drepo.io,代码行数:31,代码来源:subscription.styles.ts


示例9: styled

 */

import styled from 'styled-components';
import Button from '@material-ui/core/Button';
import Popover from '@material-ui/core/Popover';

export const Container = styled.div``;

export const FloatingButtonContainer = styled.div`
	position: absolute;
	top: -22px;
	right: 14px;
	z-index: 1;
`;

export const FloatingButton = styled(Button).attrs({
	classes: {
		disabled: 'button--disabled'
	}
})`
	&&.button--disabled {
		background: #d9d9d9;
		color: #868686;
	}
`;

export const Panel = styled(Popover).attrs({
	classes: {
		paper: 'floating-panel'
	}
})`
开发者ID:3drepo,项目名称:3drepo.io,代码行数:31,代码来源:floatingActionPanel.styles.ts


示例10: styled

import styled from 'styled-components';
import IconButton from '@material-ui/core/IconButton';
import TextField from '@material-ui/core/TextField';

export const Container = styled.div`
	position: relative;
` as any;

export const ActionsLine = styled.div`
	position: absolute;
	bottom: 9px;
	right: 0;
`;

export const StyledIconButton = styled(IconButton)`
	&& {
		padding: 5px;
		margin-right: 0;
	}
`;

export const StyledTextField = styled(TextField)`
	&& {
		margin: 8px 0;

		textarea {
			min-height: 17px;
			padding-right: 56px;
			box-sizing: border-box;
		}
开发者ID:3drepo,项目名称:3drepo.io,代码行数:30,代码来源:textField.styles.ts



注:本文中的styled-components.default函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript styled-components.div类代码示例发布时间:2022-05-25
下一篇:
TypeScript styled-components.css函数代码示例发布时间:2022-05-25
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap