How to use the next/css.$ function in next
To help you get started, we’ve selected a few next 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.
vacuumlabs / react-custom-validation / pages / example / style1.js View on Github 
boxSizing: 'border-box',
}),
css.$(' input:focus', {
outline: 'none',
borderColor: '#aaa',
}),
css.$(' button', {
height: '2rem',
width: '5rem',
textTransform: 'uppercase',
borderRadius: '.25rem',
border: '0',
backgroundColor: '#dc0067',
color: 'white',
}),
css.$(' label', {
display: 'block',
color: '#444',
float: 'left',
marginBottom: '.5rem',
fontSize: '0.9rem',
paddingLeft: '.4rem',
}),
css.$(' span', {
color: '#d22424',
float: 'right',
display: 'block',
fontSize: '0.9rem',
paddingRight: '.4rem',
})
)textAlign: 'center',
}),
css.$(' input:focus', {
outline: 'none',
borderColor: '#aaa',
}),
css.$(' button', {
height: '2rem',
textTransform: 'uppercase',
borderRadius: '.25rem',
border: '0',
backgroundColor: '#dc0067',
color: 'white',
cursor: 'pointer',
}),
css.$(' label', {
display: 'inline-block',
color: '#444',
marginBottom: '.5rem',
marginRight: '1rem',
fontSize: '0.9rem',
paddingLeft: '.4rem',
}),
css.$(' .error', {
fontSize: '0.9rem',
margin: '1rem auto',
marginLeft: '1rem',
}),
css.$(' .buttons', {
display: 'flex',
}),
css.$(' .buttons button', {import css from 'next/css'
export default css.merge(
css({
width: '95%',
maxWidth: '20rem',
margin: '0 auto',
fontFamily: 'Helvetica, Arial, sans-serif',
boxSizing: 'border-box',
textAlign: 'center',
}),
css.$(' h1', {
marginTop: '0',
color: '#444',
}),
css.$(' input', {
display: 'block',
height: '2rem',
width: '100%',
padding: '0 .5rem',
marginBottom: '1rem',
borderRadius: '.25rem',
border: '1px solid #ddd',
boxSizing: 'border-box',
}),
css.$(' input:focus', {
outline: 'none',
borderColor: '#aaa',import css from 'next/css'
export default css.merge(
css({
width: '100%',
margin: '0 auto',
fontFamily: 'Helvetica, Arial, sans-serif',
boxSizing: 'border-box',
textAlign: 'center',
}),
css.$(' h1', {
marginTop: '0',
color: '#444',
}),
css.$(' input', {
boxSizing: 'border-box',
display: 'block',
width: '1rem',
margin: '0 auto .5rem auto',
}),
css.$(' input[type=text]', {
display: 'block',
height: '2rem',
width: '100%',
padding: '0 .5rem',
marginTop: '1rem',
marginBottom: '1rem',import css from 'next/css'
export default css.merge(
css({
width: '100%',
margin: '0 auto',
fontFamily: 'Helvetica, Arial, sans-serif',
boxSizing: 'border-box',
textAlign: 'center',
}),
css.$(' h1', {
marginTop: '0',
color: '#444',
}),
css.$(' input', {
boxSizing: 'border-box',
display: 'block',
width: '1rem',
margin: '0 auto .5rem auto',
}),
css.$(' input[type=text]', {
display: 'block',
height: '2rem',
width: '100%',
padding: '0 .5rem',
marginTop: '1rem',
marginBottom: '1rem',
borderRadius: '.25rem',
border: '1px solid #ddd',
boxSizing: 'border-box',
maxWidth: '60%',}),
css.$(' h1', {
marginTop: '0',
color: '#444',
}),
css.$(' input', {
display: 'block',
height: '2rem',
width: '100%',
padding: '0 .5rem',
marginBottom: '1rem',
borderRadius: '.25rem',
border: '1px solid #ddd',
boxSizing: 'border-box',
}),
css.$(' input:focus', {
outline: 'none',
borderColor: '#aaa',
}),
css.$(' button', {
height: '2rem',
width: '5rem',
textTransform: 'uppercase',
borderRadius: '.25rem',
border: '0',
backgroundColor: '#dc0067',
color: 'white',
}),
css.$(' label', {
display: 'block',
color: '#444',
float: 'left',maxWidth: '60%',
}),
css.$(' input:focus', {
outline: 'none',
borderColor: '#aaa',
}),
css.$(' button', {
height: '2rem',
width: '5rem',
textTransform: 'uppercase',
borderRadius: '.25rem',
border: '0',
backgroundColor: '#dc0067',
color: 'white',
}),
css.$(' label', {
display: 'inline-block',
color: '#444',
marginBottom: '.5rem',
marginRight: '1rem',
fontSize: '0.9rem',
paddingLeft: '.4rem',
}),
css.$(' .error', {
color: '#d22424',
display: 'block',
fontSize: '0.9rem',
margin: '1rem auto',
maxWidth: '60%',
})
)color: '#444',
}),
css.$(' input[type=text]', {
height: '2rem',
padding: '0 .5rem',
margin: '.5rem',
borderRadius: '.25rem',
border: '1px solid #ddd',
boxSizing: 'border-box',
textAlign: 'center',
}),
css.$(' input:focus', {
outline: 'none',
borderColor: '#aaa',
}),
css.$(' button', {
height: '2rem',
textTransform: 'uppercase',
borderRadius: '.25rem',
border: '0',
backgroundColor: '#dc0067',
color: 'white',
cursor: 'pointer',
}),
css.$(' label', {
display: 'inline-block',
color: '#444',
marginBottom: '.5rem',
marginRight: '1rem',
fontSize: '0.9rem',
paddingLeft: '.4rem',
}),textTransform: 'uppercase',
borderRadius: '.25rem',
border: '0',
backgroundColor: '#dc0067',
color: 'white',
cursor: 'pointer',
}),
css.$(' label', {
display: 'inline-block',
color: '#444',
marginBottom: '.5rem',
marginRight: '1rem',
fontSize: '0.9rem',
paddingLeft: '.4rem',
}),
css.$(' .error', {
fontSize: '0.9rem',
margin: '1rem auto',
marginLeft: '1rem',
}),
css.$(' .buttons', {
display: 'flex',
}),
css.$(' .buttons button', {
marginLeft: '.5rem',
})
)width: '1rem',
margin: '0 auto .5rem auto',
}),
css.$(' input[type=text]', {
display: 'block',
height: '2rem',
width: '100%',
padding: '0 .5rem',
marginTop: '1rem',
marginBottom: '1rem',
borderRadius: '.25rem',
border: '1px solid #ddd',
boxSizing: 'border-box',
maxWidth: '60%',
}),
css.$(' input:focus', {
outline: 'none',
borderColor: '#aaa',
}),
css.$(' button', {
height: '2rem',
width: '5rem',
textTransform: 'uppercase',
borderRadius: '.25rem',
border: '0',
backgroundColor: '#dc0067',
color: 'white',
}),
css.$(' label', {
display: 'inline-block',
color: '#444',
marginBottom: '.5rem',
Popular next functions
- next
- next/amp.useAmp
- next/config
- next/css.$
- next/css.style
- next/document.getInitialProps
- next/dynamic
- next/head.rewind
- next/router.back
- next/router.events
- next/router.onRouteChangeComplete
- next/router.onRouteChangeError
- next/router.onRouteChangeStart
- next/router.pathname
- next/router.push
- next/router.query
- next/router.replace
- next/router.router
- next/router.useRouter
- next/router.withRouter