styled-components 相关问题

styled-components是一个用于样式化React应用程序的JavaScript库。它删除了样式和组件之间的映射，并允许您编写使用JavaScript扩充的实际CSS。

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

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

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