How to use @emotion/styled-base - 10 common examples

To help you get started, we’ve selected a few @emotion/styled-base examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github emotion-js / emotion / packages / styled-base / types / tests.tsx View on Github external
interface Magazine {
    kind: 'magazine'
    issue: number
  }

  type SomethingToRead = Book | Magazine

  const Readable: React.SFC = props => {
    if (props.kind === 'magazine') {
      return <div>magazine #{props.issue}</div>
    }

    return <div>magazine #{props.author}</div>
  }

  const StyledReadable = styled(Readable)`
    font-size: ${props =&gt; (props.kind === 'book' ? 16 : 14)};
  `
  ;
  ;
  ; // $ExpectError
  ; // $ExpectError
}

interface Props {
  prop: boolean
}
class ClassWithDefaultProps extends React.Component {
  static defaultProps = { prop: false }
  render() {
    return this.props.prop ?  : 
  }
github emotion-js / emotion / packages / styled-base / types / tests.tsx View on Github external
// $ExpectError
;
// $ExpectError
;
// $ExpectError
;

const Button4 = styled(
  ReactClassComponent0
)`
  backgroundColor: ${props =&gt; props.theme.backColor}

  fontSize: ${5}px;
  color: ${props =&gt; props.primary}
`
const Button5 = styled(ReactSFC0)(props =&gt; ({
  color: props.primary
}))
;<div>
  
  
</div>
;<div>
  
  
</div>
// $ExpectError
;
// $ExpectError
;
// $ExpectError
;
github emotion-js / emotion / packages / styled-base / types / tests.tsx View on Github external
;

interface PrimaryProps {
  readonly primary: string
}
/**
 * @desc
 * This function accepts `InnerProps`/`Tag` to infer the type of `tag`,
 * and accepts `ExtraProps` for user who use string style
 * to be able to declare extra props without using
 * `` styled('button')`...` ``, which does not supported in
 * styled-component VSCode extension.
 * If your tool support syntax highlighting for `` styled('button')`...` ``
 * it could be more efficient.
 */
const Button2 = styled&lt;'button', PrimaryProps&gt;('button')`
  fontsize: ${5}px;
  color: ${props =&gt; props.primary};
`
const Button3 = styled&lt;'button', PrimaryProps&gt;('button')(props =&gt; ({
  color: props.primary
}))
;<div>
  
  
</div>
;<div>
  
  
</div>
// $ExpectError
;
github emotion-js / emotion / packages / styled-base / types / tests.tsx View on Github external
// $ExpectError
;
// $ExpectError
;

const Container5 = Container3.withComponent(ReactSFC2)
;
// $ExpectError
;
// $ExpectError
;
// $ExpectError
;

// $ExpectError
styled(ReactSFC2)()

/**
 * @todo
 * I wish we could raise errors for following two `withComponent`s.
 */
Container0.withComponent(ReactClassComponent2)
Container3.withComponent(ReactClassComponent2)

const StyledClass0 = styled(ReactClassComponent0)({})
declare const ref0_0: (element: ReactClassComponent0 | null) =&gt; void
declare const ref0_1: (element: ReactClassComponent1 | null) =&gt; void
declare const ref0_2: (element: HTMLDivElement | null) =&gt; void
;
// $ExpectError
;
// $ExpectError
github emotion-js / emotion / packages / styled / src / index.js View on Github external
// @flow
import styled from '@emotion/styled-base'
import { tags } from './tags'

// bind it to avoid mutating the original function
const newStyled = styled.bind()

tags.forEach(tagName => {
  newStyled[tagName] = newStyled(tagName)
})

export default newStyled
github emotion-js / next / packages / styled / src / index.js View on Github external
// @flow
import styled from '@emotion/styled-base'

declare var codegen: { $call: Function, require: string => RegExp }

const tags = codegen`
const htmlTagNames = require('html-tag-names')
const svgTagNames = require('svg-tag-names')
module.exports = JSON.stringify(htmlTagNames
.concat(svgTagNames)
.filter((tag, index, array) => array.indexOf(tag) === index))
`

// bind it to avoid mutating the original function
const newStyled = styled.bind(undefined)

tags.forEach(tagName => {
  newStyled[tagName] = newStyled(tagName)
})

export default newStyled
github emotion-js / emotion / packages / styled-base / types / tests.tsx View on Github external
static defaultProps = { prop: false }
  render() {
    return this.props.prop ?  : 
  }
}
const StyledClassWithDefaultProps = styled(ClassWithDefaultProps)`
  background-color: red;
`
const classInstance = 

const FCWithDefaultProps = ({ prop }: Props) =&gt;
  prop ?  : 
FCWithDefaultProps.defaultProps = {
  prop: false
}
const StyledFCWithDefaultProps = styled(FCWithDefaultProps)`
  background-color: red;
`
const fcInstance =
github emotion-js / emotion / packages / styled-base / types / tests.tsx View on Github external
})
;<div>
  
  
</div>
;<div>
  
  
</div>

const Input0 = styled('input', {
  label: 'mystyle'
})`
  padding: 4px;
`
const Input1 = styled('input', {
  label: 'mystyle'
})({
  padding: '4px'
})
;
;
const Input2 = Button0.withComponent('input')

const Canvas0 = styled('canvas', {
  shouldForwardProp(propName) {
    return propName === 'width' || propName === 'height'
  }
})`
  width: 200px;
`
const Canvas1 = styled('canvas', {
github chakra-ui / chakra-ui / packages / chakra-ui / src / Modal / components.js View on Github external
py={4}
    as="header"
    position="relative"
    fontSize="xl"
    fontWeight="semibold"
    {...props}
  /&gt;
);

const ModalFooter = props =&gt; (
  
);

const ModalBody = props =&gt; ;

const StyledDialogOverlay = styled(DialogOverlay)(systemProps, extraConfig);

const ModalOverlay = forwardRef(
  ({ bg = "rgba(16,22,26,0.7)", zIndex, ...props }, ref) =&gt; (
    
  ),
github pythonkr / pyconkr-web / components / molecules / MyContributionTableRow.tsx View on Github external
import styled from '@emotion/styled-base'
import { Button } from 'components/atoms/Button'
import { isBold, Td, Tr } from 'components/atoms/ContentWrappers'
import { Contribution } from 'components/organisms/DefaultTable'
import { differenceInCalendarDays, isFuture, isPast } from 'date-fns'
import _ from 'lodash'
import React from 'react'
import intl from 'react-intl-universal'
import { mobileWidth } from 'styles/layout'
import { formatDateInWords } from 'utils/formatDate'

const ShowDetailButton = styled(Button)`
@media (max-width: ${mobileWidth}) {
width: 50px;
font-size: 10px;
height: 50px;
padding: 10px;
text-align: center;
}
`
type PropsType = {
    isProposalSubmitted?: boolean;
    isMyContribution?: boolean;
    isSponsorPaid?: boolean;
} &amp; Contribution

export default class MyContributionTableRow extends React.Component {

@emotion/styled-base

Deprecated package which became `@emotion/styled/base`

MIT
Latest version published 4 years ago

Package Health Score

85 / 100
Full package analysis

Popular @emotion/styled-base functions

Similar packages