Skip to content

Instantly share code, notes, and snippets.

@nautilytics

nautilytics/Input.tsx

Created September 12, 2022 20:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nautilytics/5dfe0a609bf8322a1a97e38f12bbac4e to your computer and use it in GitHub Desktop.
Save nautilytics/5dfe0a609bf8322a1a97e38f12bbac4e to your computer and use it in GitHub Desktop.
Download ZIP
An example of using a custom theme to style a BaseWeb Input
Raw
Input.tsx
import * as React from 'react';
import {
Input as BaseInput,
StyledEndEnhancer as BaseStyledEndEnhancer,
StyledStartEnhancer as BaseStyledStartEnhancer,
} from 'baseui/input'
import type { InputProps } from './types';
import { themedWithStyle as withStyle } from '../style-utils'
import { padding } from 'polished'
const StyledStartEnhancer = withStyle(BaseStyledStartEnhancer, ({ $theme }) => ({
backgroundColor: 'transparent',
...padding('0px', $theme.sizing['xx-small'], '0px', '0px')
}));
const StyledEndEnhancer = withStyle(BaseStyledEndEnhancer, ({ $theme }) => ({
backgroundColor: 'transparent',
...padding('0px', $theme.sizing['xx-small'], '0px', '0px')
}));
export const Input = (props: InputProps): JSX.Element => {
return (
<BaseInput
overrides={{
EndEnhancer: StyledEndEnhancer,
StartEnhancer: StyledStartEnhancer
}}
{...props}
/>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment