styled-components 相关问题

就我而言，按钮是一个可重用的组件。它可以是绿色、白色文本或白色、绿色文本和边框。有更好的 mui 方法如何处理吗？页：就我而言，按钮是一个可重用的组件。它可以是绿色、白色文本或白色、绿色文本和边框。有更好的 mui 方法如何处理吗？页码： <MainButton title="Login" /> <MainButton title="Register" additionalStyles={{ // add other styles backgroundColor: "#e5f3fd", color: "#33b864", border: `1px solid ${theme.palette.secondary.main}`, "&:hover": { backgroundColor: "rgba(46, 171, 92, 0.1)", }, }} /> 主按钮： export const MainButton = ({ title, additionalStyles }: MainButtonProps) => { const theme = useTheme(); return ( <Button sx={{ height: 40, bgcolor: theme.palette.secondary.main, color: "#ffffff", textTransform: "none", fontSize: 15, fontWeight: 600, borderRadius: 2, "&:hover": { bgcolor: "#2eab5c", }, ...additionalStyles, }} > {title} </Button> ); }; 目前看起来是一个不错的方法，因为它允许灵活性和可扩展性，以防您将来想使用 extraStyles 属性添加更多样式。如果您知道自己只会有这两种变体，那么您可能希望将这些样式烘焙到组件中，并让它们在道具上切换。下面是一个例子，但这不一定更好，只是另一种方法。 export const MainButton = ({ title, variant }: MainButtonProps) => { const theme = useTheme(); const defaultStyles = { height: 40, textTransform: "none", fontSize: 15, fontWeight: 600, borderRadius: 2, }; const primaryStyles = { bgcolor: theme.palette.secondary.main, color: "#ffffff", "&:hover": { bgcolor: "#2eab5c", }, }; const secondaryStyles = { backgroundColor: "#e5f3fd", color: "#33b864", border: `1px solid ${theme.palette.secondary.main}`, "&:hover": { backgroundColor: "rgba(46, 171, 92, 0.1)", }, }; const styles = variant === 'secondary' ? { ...defaultStyles, ...secondaryStyles } : { ...defaultStyles, ...primaryStyles }; return ( <Button sx={styles}> {title} </Button> ); }; 然后将使用变体属性来调用： <MainButton title="Login" /> <MainButton title="Register" variant="secondary" /> 这更清楚地表明存在两个明确定义的变体。

reactjs material-ui styled-components

回答 1 投票 0

使用样式组件在 Material-UI 中进行媒体查询

Material UI 有一组很好的内置媒体查询：https://material-ui.com/customization/breakpoints/#css-media-queries Material UI 还允许我们将 Styled-Components 与 Material UI 一起使用：h...

reactjs material-ui styled-components

回答 6 投票 0

如何在 Next.js 服务器组件中使用 Material-ui 风格的组件

我正在将 Next.js 版本 14 与应用程序路由器以及 Material-UI v5 一起使用。每当我在服务器页面组件中渲染 Material-UI 组件时，它都工作得很好。当我

next.js material-ui styled-components emotion css-in-js

回答 1 投票 0

Mui 风格的组件未使用 React-hook-form 注册

如果我注册用户名和密码时没有使用 mui 风格的组件。有用 //这工作正常如果我注册用户名和密码时没有使用 mui 风格的组件。它有效 //This works fine <TextField id="username" type="text" autoComplete="off" inputProps={{ 'data-testid': 'username' }} label={t('COMMON.USERNAME')} helperText={errors.username && t('LOGIN_PAGE.THIS_FIELD_IS_REQUIRED')} sx={{ width: '100%' }} {...register('username', { required: true })} error={!!errors.username || isLoginError} /> <TextField id="password" type="password" autoComplete="off" inputProps={{ 'data-testid': 'password' }} label={t('COMMON.PASSWORD')} helperText={errors.password && t('LOGIN_PAGE.THIS_FIELD_IS_REQUIRED')} sx={{ width: '100%' }} {...register('password', { required: true })} error={!!errors.password || isLoginError} /> 如果我尝试创建一个 mui 风格的组件并将 props 传递给它，这不会通过react-hook-form注册 //username component is not registered with react-hook-form //create styled component out of react component like this const StyledTextField = styled((props: TextFieldProps) => ( <TextField id="username" type="text" autoComplete="off" inputProps={{ 'data-testid': 'username' }} sx={{ width: '100%' }} {...props} /> ))(); // using it like this, <StyledTextField label={t('COMMON.USERNAME')} helperText={errors.username && t('LOGIN_PAGE.THIS_FIELD_IS_REQUIRED')} {...register('username', { required: true })} error={!!errors.username || isLoginError} /> <TextField id="password" type="password" autoComplete="off" inputProps={{ 'data-testid': 'password' }} label={t('COMMON.PASSWORD')} helperText={errors.password && t('LOGIN_PAGE.THIS_FIELD_IS_REQUIRED')} sx={{ width: '100%' }} {...register('password', { required: true })} error={!!errors.password || isLoginError} /> 不知道我在这里做错了什么...... 我认为这是因为您的样式组件没有转发引用，如果您检查 register 函数的返回值，您会注意到对输入的引用。 https://react-hook-form.com/docs/useform/register register: (name: string, RegisterOptions?) => ({ onChange, onBlur, name, ref }) 在样式组件中转发引用，或者使用正确的样式语法。如果你使用 Mui 风格，正确的语法应该是这样的： const StyledTextField = styled(TextField)({ //css here });

material-ui styled-components react-hook-form emotion

回答 1 投票 0

在 Next.js 14 中应用全局样式

我在使用新的 Next.js 实现 style jsx 全局属性时遇到问题。在之前的文件中，您需要将其添加到 _app.js 文件中，但由于它不再存在，我想...

javascript reactjs next.js global-variables styled-components

回答 1 投票 0

响应式 CSS 网格，具有固定行和最大列，但可以显示更多项目

我正在尝试创建一个布局为 2 行 x 列的网格组件。列最多可以有 6 个，并且网格项是未知数量的反应子项，因此有 x 列。我的网格掉了...

css reactjs responsive-design css-grid styled-components

回答 1 投票 0

如何在检查器中查看样式组件的名称（类名称）？（寻找不包括降级样式组件版本的答案）

几年前学习样式组件时，我记得总是使用“样式组件/宏”中的导入样式，以便在检查时能够看到实际组件的名称（对于