styled.div的大坑

最新推荐文章于 2024-08-01 15:31:55 发布
最新推荐文章于 2024-08-01 15:31:55 发布
阅读量1.2k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： JS 文章标签： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/hyf_home/article/details/88956010
本文介绍了一个使用JS结合styled-components进行CSS样式的具体实践案例。作者分享了在编写样式过程中遇到的问题及解决办法，特别是关于如何正确使用模板字符串来定义样式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

import styled from 'styled-components';


export const HomeWrapper = styled.div`
    width:960px;
    margin:0 auto;
    height:300px;
    background: red;
`;

这是JS中写的css代码  ，初学，一直找不到错误， 最主要的是那个   `  这个符号是ESC键下的英文点，。。。。真是醉

React--》掌握styled-components重塑React样式管理
ztK63LrD的博客
08-04 2793
想象一下，如果你的React组件不仅能自描述其逻辑，还能直接声明自己的样式，这种“所见即所得”的编程体验是不是让人心动不已？styled-components正是这样一把钥匙，它彻底颠覆了我们对React样式管理的传统认知，让样式与组件的结合变得如此自然与和谐。
使用 Styled Components 编写样式化组件
lio-zero 的博客
05-31 830
本文已整理到 Github，地址 ???? blog。 如果我的内容帮助到了您，欢迎点个 Star ???????????? 鼓励鼓励 :) ~~ 我希望我的内容可以帮助你。现在我专注于前端领域，但我也将分享我在有限的时间内看到和感受到的东西。 Styled Components 是一个 CSS-in-JS 库，可让您编写常规 CSS 并将其附加到 JavaScript 组件。使用 styled-components，...
React之样式设置
WHTGS的博客
04-18 670
主要三种设置方式： 行内、classnames、模块化、styled-components 1 设置css行内样式 注意样式名称如果按照正常的css来写要加引号，如果写成注入fontSize可以不用加，但是属性值一定要加引号，最后外层要使用双大括号 格式： {{fontSize："200px"}} import React, { Component } from 'react' export d...
React之中的styled-components
qq_47872824的博客
02-17 1315
react之中styled-components设置css样式
React组件 添加样式
Dark_programmer的博客
03-03 1485
组件中DOM样式 第一种、行内样式 通过使用表达式传入样式对象来实现： 方式一： <div style={{ color: "red", fontSize: 30 + "px" }}> 通过行内样式进行设置 </div> 需要注意的是{{}}，此处有两对花括号。第一个表示我们在要JSX里插入JS了，第二个是对象的括号 方式二： constructor(p...
在react中使用styled-components写css样式 (真香)
会点php的前端小渣渣
12-08 580
首先优点就是 可以不用装node-sass、less那些了 css in js的基本使用： styled-components中包含各种标签同名的函数，在写样式的时候，就调用函数就行，重点是使用的形式来调用函数。函数返回一个react的组件。 在css in js中写的写法形式，跟less scss基本一样，可以嵌套，可以使用伪元素 伪类等等。 css in js 的中级使用 为写css in js提供智能提示。
styled.div``这个语法，在js中没见过
最新发布
07-29
`styled.div` 是 `styled-components` 库提供的一种语法，用于创建带有样式的 React 组件。它是 CSS-in-JS 方法的一种实现，允许开发者在 JavaScript 中直接编写 CSS 样式，并将其绑定到 React 组件上。这种语法利用...
const WeekDay = styled.div` flex: 1; background-color: cornflowerblue; font-size: 12px; line-height: 16px; text-align: center; color: rgba(0, 0, 0, 0.65); `; 里面的文字想要居中，应该如何做
06-07
可以在 `styled.div` 的样式里添加 `display: flex;` 和 `align-items: center;` 两个属性来实现文字居中，例如： ``` const WeekDay = styled.div` flex: 1; display: flex; align-items: center; background-...
const WeekDay = styled.div flex: 1; background-color: cornflowerblue; font-size: 12px; line-height: 16px; text-align: center; color: rgba(0, 0, 0, 0.65);; 里面的文字想要居中，如果不适用flex，应该如何做
06-07
const WeekDay = styled.div` flex: 1; background-color: cornflowerblue; font-size: 12px; line-height: 50px; /* 假设 WeekDay 容器的高度为 50px */ text-align: center; color: rgba(0, 0, 0, 0.65); `;...
import styled, { keyframes } from 'styled-components'; import useStore from '../../store/store'; const LoadingPage = () => { const { loading } = useStore(); return ( <> <LoadingContainer className={loading ? '' : 'loaded'}> {/* <Loader /> <div>Loading...</div> */} <LoadingLeft className={loading ? '' : 'loaded'} /> <LoadingRight className={loading ? '' : 'loaded'} /> <SpinnerBox className={loading ? '' : 'loaded'}> <div className='configure-border-1'> <div className='configure-core'></div> </div> <div className='configure-border-2'> <div className='configure-core'></div> </div> <div className='loading-word'>加载中...</div> </SpinnerBox> </LoadingContainer> </> ) } // 定义加载动画 const spin = keyframes` 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } `; // Loading 组件样式 const LoadingContainer = styled.div` display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; width: 100%; font-size: 24px; z-index: 999; transition: all 2s; opacity: 1; position: fixed; &.loaded { opacity: 0; position: absolute; z-index: -1001; } `; const Loader = styled.div` border: 8px solid rgba(255, 255, 255, 0.3); border-top: 8px solid white; border-radius: 50%; width: 60px; height: 60px; animation: ${spin} 1s linear infinite; `; const LoadingLeft = styled.div` position: fixed; z-index: 1000; width: 52%; height: 100%; background: #37474f; left: 0; transition: all 1s; &.loaded { transform: translate(-100%, 0); } ` const LoadingRight = styled.div` position: fixed; z-index: 1000; width: 52%; height: 100%; background: #37474f; right: 0; transition: all 1s; &.loaded { transform: translate(100%, 0); } ` const SpinnerBox = styled.div` position: fixed; z-index: 1001; opacity: 1; transition: all .3s; &.loaded { opacity: 0; } .configure-border-1 { position: absolute; padding: 3px; width: 115px; height: 115px; background: #ffab91; animation: configure-clockwise 3s ease-in-out 0s infinite alternate; .configure-core { width: 100%; height: 100%; background: #37474f; } } .configure-border-2 { left: -115px; padding: 3px; width: 115px; height: 115px; background: #3ff9dc; transform: rotate(45deg); animation: configure-xclockwise 3s ease-in-out 0s infinite alternate; .configure-core { width: 100%; height: 100%; background: #37474f; } } .loading-word { position: absolute; color: #eff; font-size: 16px; top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; } ` export default LoadingPage出现这个bug tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
03-15
const LoadingContainer = styled.div` // 增加will-change优化渲染 will-change: opacity, transform; // 明确层级关系 &:not(.loaded) { z-index: 999; } // 强制GPU加速 transform: translateZ(0); ` `...
如何在react项目使用styled-components以及styled-components的应用和介绍
qq_39826423的博客
07-22 1366
如何在react项目使用styled-components以及styled-components的应用和介绍
react基础使用styled-components编写js的样式组件的基本使用
memedadexixaofeifei的博客
06-19 376
1、安装styled-components，用于js编写对应的组件 styled的使用，用于创建组件 import styled from 'styled-components' export const Item = styled.div` width: 350px; height: 36px; line-height: 36px; font-weight: bold; ` 2、createGlobalStyle用于创建全局样式 import { create
style-components基本使用
m0_69853343的博客
08-01 669
语法格式：export const TabsWrapper = styled.div` ` 把一个div变成了一个名为TabsDiv的组件，然后在 ` `中定义样式。直接写属性的样式就是div的样式。5.进阶用法二：根据动态样式控制 配置一个公用的万能div组件，使用的时候只需要在组件中传递参数就能达到想要的样式，如：（StyleDiv为一个基础div）样式组件内部通过props接受一个 active的属性 props.active的值为真就执行后面的样式，注意：css是一个函数需要导入。
div标签常用属性
热门推荐
Hello World!
06-20 3万+
div标签所有属性 color : #999999 文字颜色  font-family : 宋体 文字字型  font-size : 10pt 文字大小  font-style:itelic 文字斜体育 font-variant:small-caps 小字体 letter-spacing : 1pt 文字间距 line-height : 200% 设定行高 font-weigh
react 6种方式编写样式
一步一个脚印，踏实努力，向着目标前进
01-05 2451
直接在React组件中使用style属性来定义样式。这种方式比较适合定义动态的样式，因为它允许你将JavaScript表达式作为样式的值。：通过创建外部的CSS文件，并在React组件中引入这些文件来定义样式。这种方式比较适合定义静态的、可复用的样式。：这是一种将CSS类名局部化的技术，可以有效避免类名冲突的问题。通过创建文件，并在React组件中引入这个文件，你可以使用模块化的CSS类名来定义样式。：这是一个流行的CSS-in-JS库，允许你以组件化的方式编写CSS。
React之css解决方案Styled-Components
qq_37942845的博客
08-04 1059
安装 yarn add styled-components 引入 import styled from 'styled-components' 先来个最基础的例子 // 创建一个 Title 组件,它将渲染一个附加了样式的 <h1> 标签 const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; // 创建一个 Wrapper 组件,它将渲染一个附加了.
21 【styled-components的使用】
DSelegent的博客
12-13 2944
21 【styled-components的使用】
React使用Styled-Componets来添加样式
YooHoeh的博客
07-19 2690
React使用Styled-Componets来添加样式 Styled-Comonents是用JS中ES6 语法的方式来管理CSS样式的一个组件，解决了在import CSS文件时样式重复 安装 项目根目录下打开bash yarn add styled-components 新建一个style.js文件来添加样式 注意，这里不是用style.css文件。 ...
styled-components设置组件属性
Wopelo的博客
05-18 6673
问题 最近在试着用react做一个音乐播放器，在这之前其实并不了解styled-components，但由于使用css in js并且想实现hover效果，百度各种解决方案后发现了styled-components这个好东西，如果你看到了这篇博客，就证明你应该了解或者熟练运用styled-components了。 回到项目开发中，一个音乐播放器应该由多个组件组成，其中有一个list组件用于展示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

talNot

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值