Use of Theme-UI components for native html elements

[dowi]

Hi

I am using a 3rd party library to render a form based on JSON schema (https://github.com/rjsf-team/react-jsonschema-form/, but the question applies to any other native html elements.

I would like the output of this library (e.g. input tags, select tags) to look visually similar to Theme-UI's components for uniformity (I use them for other parts of the website).

How can this be achieved?

[lachlanjc]

This isn’t the easiest, but it’s totally doable. There are 3 parts:

1. Make a Box/div/etc around the components where you’ll style the children
2. Add a CSS selector for each tag you’re styling
3. For each selector, use the theme variant plus the base styles the components internally use

So for example:

<Box
    as="form"
	sx={{
		'input[type=text],select,textarea': {
			variant: 'forms.input',
			display: 'block',
			width: '100%',
			p: 2,
			appearance: 'none',
			fontSize: 'inherit',
			lineHeight: 'inherit'
		},
		label: { variant: 'forms.label', mb: 3 }
	}}
>
	<label>
		Name:
		<input type="text" name="name" />
	</label>
	<label>
		Bio:
		<textarea />
	</label>
	<label>
		Pick your favorite flavor:
		<select>
			<option value="grapefruit">Grapefruit</option>
			<option value="lime">Lime</option>
			<option value="coconut">Coconut</option>
			<option value="mango">Mango</option>
		</select>
	</label>
</Box>

To do a more complicated one like Select, you’ll need to get the source styles & apply to input[type=range].

I’ve made a more complete example here: https://repl.it/@lachlanjc/theme-ui-1038
See live: https://theme-ui-1038.lachlanjc.repl.co/