How to use the theme-ui.Styled.a function in theme-ui
To help you get started, weβve selected a few theme-ui 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.
blocks / blocks / src / blocks.js View on Github 
/** @jsx jsx */
import { jsx, Styled } from 'theme-ui'
import { Button, Box, Flex, Input } from '@theme-ui/components'
const Link = Styled.a
export const HeaderA = () => (
<header>
</header>/** @jsx jsx */
import { jsx, Styled } from 'theme-ui'
import { Button, Box, Flex, Input } from '@theme-ui/components'
const Link = Styled.a
export const HeaderA = () => (
<header>
</header>}) => {
const [code, setCode] = useState(null)
const [rawCode, setRawCode] = useState(null)
const [transformedCode, setTransformedCode] = useState(null)
const [elementId, setElementId] = useState(null)
const [elementData, setElementData] = useState(null)
const [activeTab, setActiveTab] = useState(0)
const [srcBlocks, setSrcBlocks] = useState([])
const [theme, setTheme] = useState(defaultTheme)
const blocks = providedBlocks ? providedBlocks : DEFAULT_BLOCKS
const scope = {
Blocks: DEFAULT_BLOCKS.Blocks,
Styled,
Link: Styled.a,
jsx: pragma(setElementId),
BLOCKS_Droppable: props => ,
BLOCKS_Draggable: props => (
),
BLOCKS_DraggableInner: props => <div>,
BLOCKS_DroppableInner: props => <div>,
BLOCKS_Text: props => <span>,
...themeComponents,
...blocks,
BLOCKS_Layout: layout
}
useEffect(() => {
const newCode = transforms.addTuid(initialCode)
setCode(newCode)</span></div></div>}) => {
const [code, setCode] = useState(null)
const [rawCode, setRawCode] = useState(null)
const [transformedCode, setTransformedCode] = useState(null)
const [elementId, setElementId] = useState(null)
const [elementData, setElementData] = useState(null)
const [activeTab, setActiveTab] = useState(0)
const [srcBlocks, setSrcBlocks] = useState([])
const [theme, setTheme] = useState(defaultTheme)
const blocks = providedBlocks ? providedBlocks : DEFAULT_BLOCKS
const scope = {
Blocks: DEFAULT_BLOCKS.Blocks,
Styled,
Link: Styled.a,
jsx: pragma(setElementId),
BLOCKS_Droppable: props => ,
BLOCKS_Draggable: props => (
),
BLOCKS_DraggableInner: props => <div>,
BLOCKS_DroppableInner: props => <div>,
BLOCKS_Text: props => <span>,
...themeComponents,
...blocks,
BLOCKS_Layout: layout
}
useEffect(() => {
const newCode = transforms.addTuid(initialCode)
setCode(newCode)</span></div></div>
