本文整理汇总了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;
示例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%;
示例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%;
`;
示例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;
}
示例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;
}
`;
示例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;
}
示例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;
`;
示例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;
}
`;
示例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'
}
})`
示例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;
}