styled-components 相关问题

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

我想要这样导航栏.js 我想要这样的 NavBar.js <div className="icon-tab"> <Link className='icon-name nav-link' to="/Feed"> <div className=''> <img src="https://cdn-icons-png.flaticon.com/128/1176/1176875.png" alt='FEED TAB' className='icon' width={27} height={27} /> <div className='icon-name'>FEED</div> </div> </Link> </div> 应用程序.css .icon-tab { justify-content: center; align-items: center; display: flex; width: 90px; margin-left: 30px; text-align: center; } .icon-tab:active{ border-bottom: 2px solid #0275b1; } .icon-name { font-weight: bold; text-decoration: none; color: #000; } .icon-name:active { font-weight: bold; color: #0275B1; } 当主活动屏幕为主屏幕时，主屏幕永远不会出现条形图标，并且主屏幕标题颜色将发生变化，并且当屏幕打开（活动）时，底部边框也会出现我正在尝试这样做，但它不起作用，当我的鼠标单击图标和附近的栏标题时，它的颜色会发生变化，但我的输出会像这样，但在我的鼠标落下后，颜色将保持变化。当我的主屏幕打开时，如何执行此操作，然后我的主屏幕从不栏标题颜色更改，当我的另一个屏幕打开时，主屏幕从不栏标题颜色默认为黑色。使用导航栏代替链接： <NavLink className={'icon-name nav-link'} to="/Feed" > <div className="icon-tab"> <div className=''> <img src="https://cdn-icons-png.flaticon.com/128/1176/1176875.png" alt='FEED TAB' className='icon' width={27} height={27} /> <div className={`icon-name`}>FEED</div> </div> </div> </NavLink> 在上面的代码中，当 NavLink 处于活动状态时，链接获取 active class 并将 css 更改为： .icon-name { font-weight: bold; text-decoration: none; color: #000; } .icon-name.active , .icon-name.active .icon-name { font-weight: bold; color: #0275B1; } .icon-name .icon-tab { justify-content: center; align-items: center; display: flex; width: 90px; margin-left: 30px; text-align: center; } .icon-name.active .icon-tab{ border-bottom: 2px solid #0275b1; } 你是这个意思吗？

css reactjs react-hooks styled-components

回答 1 投票 0

Material UI 样式组件 - “如果没有引用，X 的推断类型就无法命名......”

这个TS问题如何解决？我的样式组件是从 style.ts 文件导出的，并在 React 组件的 index.tsx 文件中使用：样式.ts：从 '@mui/material/... 导入 { styled, Theme }

reactjs typescript types material-ui styled-components

回答 3 投票 0

使用样式组件单击时如何从材质图标按钮中删除轮廓边框

我使用了材质图标按钮，但不希望单击按钮时出现轮廓边框。我尝试了一切，但似乎没有任何效果。是否可以使用样式组件来做到这一点？...

css reactjs material-ui styled-components iconbutton

回答 1 投票 0

React MUI 卡无法具有相同的高度

我有一个带有 3 张卡的仪表板，其中调用了 3 个独立的组件。卡片的高度根据每张卡片的内容而扩展。我想让所有 3 张卡片的高度都与...

css reactjs material-ui grid styled-components

回答 1 投票 0

React 组件通过自增 padding css 值来渲染子组件

嗨，我正在尝试实现一个用例，其中反应组件通过根据其渲染的嵌套方式自行递增来向样式组件发送一些填充值。假设有一个 List 组件

javascript css reactjs styled-components

回答 1 投票 0

为样式组件主题添加 IntelliSense

当我在样式组件中使用主题时，我尝试添加 IntelliSense。这是我使用 ThemeProvider 的 index.tsx 文件：从“反应”导入反应；从'react-dom/client'导入ReactDOM；

typescript styled-components react-typescript

回答 2 投票 0

如何隐藏滚动条轨道（不溢出）

问题每当用户重新加载页面时，该滚动条轨道就会出现在所有页面上。它最初不存在。考虑到没有溢出（因此没有滚动条），这很奇怪，而且...

css reactjs next.js tailwind-css styled-components

回答 1 投票 0

当我单击 X 按钮时，React 和 Styled 组件中不会播放动画

我想创建带有样式组件的 Popup 并添加淡入和淡出动画。但问题是，当我通过单击 X 按钮关闭弹出窗口时，动画不会播放。这里是...

reactjs styled-components

回答 1 投票 0

如何在下一个js应用程序路由器中实现mui风格的组件而不使用“使用客户端”

我想在nextjs 14中使用mui风格的组件，但在每个页面上我必须写“使用客户端”，我想使用nextjs ssr功能但它强迫我进行csr，如何实现它？请

reactjs next.js material-ui server-side-rendering styled-components

回答 1 投票 0

通过嵌套样式组件和 React 函数组件传递瞬态 props

我一直在努力处理样式组件和瞬态道具。请参阅下面的代码。我有一个样式组件，我们称之为 StyledLabel，它接收一个瞬态 prop。 StyledLabel 用于

javascript reactjs styled-components

回答 2 投票 0

如何在 React Form 中确认密码？

我在 styled-component 中使用 ReactBootstrap ，在 Context 中存储 formData 我希望 Form.Control 保持其原始样式，并仅在第一次输入后才开始检查验证。当我改变名字时...

reactjs styled-components form-control

回答 1 投票 0

如何使用样式组件导入共享CSS

我在我的反应项目中使用样式组件。我想创建一个共享加载背景。我有以下定义： const loadAnimation = 关键帧` 0% { 背景位置：95% 95...

javascript css reactjs styled-components

回答 1 投票 0

如何使用 mui 为可重复使用的 React 按钮应用不同的样式

就我而言，按钮是一个可重用的组件。它可以是绿色、白色文本或白色、绿色文本和边框。有更好的 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

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

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