Open rick-liyue-huang opened 1 month ago
@rick-liyue-huang Can you add a sandbox for the same?
@KumarNitin19 I paste the codes in 'stackblitz', in the following link: https://stackblitz.com/~/github.com/rick-liyue-huang/try-ui-core-component
, please help me have a look. thanks
Thanks for reporting the issue! Joy UI development is temporarily on hold as the maintainers focus on the next two major releases of Material UI
Steps to reproduce
Link to live example: (required)
Steps:
import { experimental_extendTheme as materialExtendTheme, Experimental_CssVarsProvider as MaterialCssVarsProvider, THEME_ID as MATERIAL_THEME_ID, } from '@mui/material/styles'; import { CssVarsProvider as JoyCssVarsProvider, ThemeProvider as JoyThemeProvider, THEME_ID as JOY_THEME_ID, } from '@mui/joy/styles'; import CssBaseline from '@mui/material/CssBaseline';
import { darkTheme } from '../src/themes/dark.theme'; import { lightTheme } from '../src/themes/light.theme'; import { joyThemes } from '../src/themes/joy.themes';
// import '../src/index.css';
import '@fontsource/roboto/300.css'; import '@fontsource/roboto/400.css'; import '@fontsource/roboto/500.css'; import '@fontsource/roboto/700.css'; import '@fontsource/material-icons';
const THEMES = { light: lightTheme, dark: darkTheme, };
// Decorator to wrap stories with I18nextProvider const withI18next = (Story: FC) => { return ( // This catches the suspense from components not yet ready (still loading translations) // Alternative: set useSuspense to false on i18next.options.react when initializing i18next <Suspense fallback={
};
const withTheme = (Story: FC, context) => { const { theme: themeKey } = context.globals; const theme = useMemo( () => THEMES[themeKey] || THEMES['light'], [themeKey] );
};
const withNewTheme = withThemeFromJSXProvider({ themes: { light: lightTheme, dark: darkTheme, }, defaultTheme: 'light', Provider: ThemeProvider, GlobalStyles: CssBaseline, });
const preview: Preview = { decorators: [withI18next, withTheme], // Add the i18n decorator here parameters: { actions: { fn: '^on[A-Z].*' }, controls: { expanded: true, // will show all controls by default matchers: { color: /(background|color)$/i, date: /Date$/i, }, }, }, };
export default preview;
const InputStyles = cva([''], { variants: { size: { lg: styles.large, md: styles.medium, sm: styles.small, }, }, compoundVariants: [ { size: 'lg', }, ], defaultVariants: { size: 'lg', }, });
type InputBaseProps = Pick< JoyInputProps, | 'variant' | 'startDecorator' | 'endDecorator' | 'disabled' | 'onChange' | 'type' | 'placeholder'
export interface InputProps extends InputBaseProps { className?: string; style?: React.CSSProperties; }
export const Input = ({ className, style, size, ...rest }: InputProps) => { return ( <JoyInput {...rest} className={cn(InputStyles({ size }), className)} style={style} /> ); };
Don't forget to mention which browser you used. Output from
npx @mui/envinfo
goes here.