在样式组件中处理悬停的最佳方法是什么.我有一个包裹元素,当盘旋时会显示一个按钮.
我可以在组件上实现一些状态并在悬停时切换属性但是想知道是否有更好的方法来使用styled-cmponents.
像下面这样的东西不起作用,但是理想的:
const Wrapper = styled.div`
border-radius: 0.25rem;
overflow: hidden;
box-shadow: 0 3px 10px -3px rgba(0, 0, 0, 0.25);
&:not(:last-child) {
margin-bottom: 2rem;
}
&:hover {
.button {
display: none;
}
}
`
我知道如何theme使用以下styled方式获取from组件:
const StyledView = styled.View`
color: ${({ theme }) => theme.color};
`;
但是如何从普通组件中获取或将其应用于不同的属性？例:
index.js
<ThemeProvider theme={{ color: 'red' }}>
<Main />
</ThemeProvider>
main.js
<View>
<Card aCustomColorProperty={GET COLOR FROM THEME HERE} />
</View>
注意如何不调用需要主题的属性
style
我有一个带有消息列表的线程，该消息列表是通过GET_THREAD_MESSAGES查询获取的。该查询是分页的，具体取决于用户是否之前看到该线程，可能会加载第一页，最后一页或仅加载新消息。（即first/after/before/last可以使用任何值传递）
thread(id: "asdf") {
messageConnection(after: $after, first: $first, before: $before, last: $last) {
edges {
cursor
node { ...messageInfo }
}
}
}
现在我有一个sendMessage突变，我称之为，然后在该update突变的方法中，我想乐观地将发送的消息添加到线程消息中，以获得更好的UX。没有分页，我知道我会这样做：
const data = store.readQuery({
query: GET_THREAD_MESSAGES,
variables: { id: message.threadId }
})
data.messageConnection.edges.push(newMessageEdge);
store.writeQuery({
query: GET_THREAD_MESSAGES,
variables: { id: message.threadId },
data,
})
不幸的是，由于我知道有分页，因此该store.readQuery调用会引发一个错误，提示“它找不到该messageConnection线程的字段”，因为该字段现在类似于messageConnection({ after: 'jfds1223asdhfl', first: 50, before: null, last: null })。在阿波罗文档说，你应该用@connection指令的查询工作，解决这一问题。我试图将查询更新为如下所示：
thread(id: "asdf") {
messageConnection(...) @connection(key: …如何翻译涉及带有样式组件的兄弟选择器的规则？(我认为它还涉及通过生成的类名称的其他样式的样式)
const Pane = styled.div`
& > .subItem + .subItem {
margin-top:10px;
}
`
所以,我的jQuery没有做任何事情,如果我用apache做,也不正常打开它.(铬)
我将它链接到HTML,它连接到我的CSS,但它没有做任何事情.不完全确定是否因为我没有正确链接它或其他东西.这是我的所有代码:(奖金问题:为什么不在页面上的锦标赛结果列表？)
非常感谢!
Home.html中:
<!DOCTYPE html>
<html>
<head>
<title>Niki Stoiber</title>
<script type='text/javascript' src='http://localhost/Niki/script.js'></script>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
</head>
<body>
<div id="navbar">
<ul>
<a href="Home.html"><li class="pull-me">Home</li></a>
<a href="AboutMe.html"><li class="pull-me">About Me</li></a>
<a href="Tournaments.html"><li class="pull-me">Tournament Results</li></a>
<a href=""><li class="pull-me">Social Networks</li></a>
</ul>
</div>
<br>
<br>
<div id="title">
<h1 align="center">Niki Stoiber</h1>
</div>
<p>Hey there, my name is Niki Stoiber, and this is my Webpage!</p>
<p>I am a 9 year old boy from Austria and I want to be a professional tennisplayer someday.</p>
</body>
</html>
AboutMe.html: …
我想使用jQuery在我的网站上添加一个简单的加载动画,当我加载页面时它会出现 - 但它只是永远重复,并且在指定的500ms之后不会淡出.
<div class="loading">
<img src="http://www.puzzlexperts.com/images/Preloader_3.gif" id="loader">
</div>
#loader {
display: block;
position: absolute;
left: 45%;
top: 45%;
z-index: 1000;
}
.loading {
position: absolute;
z-index: 100;
height: 100%;
width: 100%;
background-color: #fff;
}
$(window).load(function() {
$("#loader").delay(500).fadeOut("slow");
$(".loading").delay(500).fadeOut("slow");
}
我希望它能在纯白色的全屏背景上显示加载动画500ms,然后fadeOut慢慢地显示网站.
你们知道如何解决这个问题吗？
javascript ×4
css ×3
reactjs ×3
html ×2
jquery ×2
apache ×1
apollo ×1
graphql ×1
react-apollo ×1
react-native ×1