How to use the @emotion/css.css function in @emotion/css
To help you get started, we’ve selected a few @emotion/css 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.
opctl / opctl / webapp / src / components / Form / index.tsx View on Github 
export default function Form(
{
className,
children,
isValid,
onSubmit,
submitName
}: Props
) {
return (
<form> e.preventDefault()}
>
{children}
{
<input style="{{" type="submit" hidden="">
}
{</form>>
<div>
{props.title}
{
props.summary &&
<div>
{props.summary}
</div>
}
</div>
{props.children}
)
}theme={{
container: cx(
css({
width: '100%',
position: 'relative'
}),
className
),
input: css({
...formElementStyles,
backgroundColor: brandColors.white,
color: brandColors.black,
padding: '1rem 1.2rem',
width: '100%'
}),
suggestionsContainerOpen: css({
backgroundColor: brandColors.white,
border: `1px solid ${brandColors.lightGray}`,
borderBottomLeftRadius: '.3rem',
borderBottomRightRadius: '.3rem',
display: 'block',
padding: '1rem 1.2rem',
position: 'absolute',
left: 0,
right: 0,
zIndex: 2
}),
suggestionsList: css({
textAlign: 'left',
listStyleType: 'none',
margin: 0,
padding: 0export default function Panel(props) {
return (
<div>
{props.children}
</div>
)
}}
suggestions={options}
shouldRenderSuggestions={
shouldSearch
? shouldSearch
: () => true
}
theme={{
container: cx(
css({
width: '100%',
position: 'relative'
}),
className
),
input: css({
...formElementStyles,
backgroundColor: brandColors.white,
color: brandColors.black,
padding: '1rem 1.2rem',
width: '100%'
}),
suggestionsContainerOpen: css({
backgroundColor: brandColors.white,
border: `1px solid ${brandColors.lightGray}`,
borderBottomLeftRadius: '.3rem',
borderBottomRightRadius: '.3rem',
display: 'block',
padding: '1rem 1.2rem',
position: 'absolute',
left: 0,
right: 0,>
{
title || onClose || onComplete
? <div>
<div>
{
onClose &&
<div>
Close
</div>
}
</div>
</div>padding: '1rem 1.2rem',
width: '100%'
}),
suggestionsContainerOpen: css({
backgroundColor: brandColors.white,
border: `1px solid ${brandColors.lightGray}`,
borderBottomLeftRadius: '.3rem',
borderBottomRightRadius: '.3rem',
display: 'block',
padding: '1rem 1.2rem',
position: 'absolute',
left: 0,
right: 0,
zIndex: 2
}),
suggestionsList: css({
textAlign: 'left',
listStyleType: 'none',
margin: 0,
padding: 0
}),
suggestion: css({
cursor: 'pointer',
margin: '.25rem 0',
':hover': {
backgroundColor: brandColors.reallyLightGray
},
':first-child': {
marginTop: 0
},
':last-child': {
marginBottom: 0export default function Modal(
{
children,
className,
isCompleteDisabled,
isOpen,
onComplete,
onClose,
title,
}: Props
) {
return (import React from 'react'
import brandColors from '../../brandColors'
import { css, cx } from '@emotion/css'
const commonCss = css({
backgroundColor: brandColors.reallyReallyLightGray,
paddingRight: '1.2rem',
paddingLeft: '1.2rem',
width: '100%',
verticalAlign: 'middle'
})
/**
* A titled section of the panel containing rows & optionally a summary
*/
export default function PanelSection(props) {
return (export default function RightNav({
isCompleteDisabled,
onClick
}) {
return (
<div>
{
onClick &&</div>
