[英]react jss how to style custom html tag
I am using material-ui
, see the sample code below:我正在使用
material-ui
,请参阅下面的示例代码:
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
const useStyles = makeStyles((theme) => ({
root: {
'& > *': {
margin: theme.spacing(1),
},
},
}));
export default function ContainedButtons() {
const classes = useStyles();
return (
<div className={classes.root}>
<Button variant="contained">Default</Button>
<Button variant="contained" color="primary">
Primary
</Button>
<Button variant="contained" color="secondary">
Secondary
</Button>
<Button variant="contained" disabled>
Disabled
</Button>
<Button variant="contained" color="primary" href="#contained-buttons">
Link
</Button>
</div>
);
}
This is first time I use jss
, I try to play around with & > *
to understand how it works, I guess it is some sort of css selector, but check through the doc here and here , I am confused with below:这是我第一次使用
jss
,我尝试使用& > *
来了解它是如何工作的,我猜这是某种 css 选择器,但是请查看此处和此处的文档,我对以下内容感到困惑:
*
and >
are valid css selector, I can understand, but what is &
meaning there? *
和>
是有效的 css 选择器,我能理解,但是&
是什么意思?
I want to limit the css selector to be applied to button only, should I use & > button
or & > Button
?我想限制 css 选择器仅应用于按钮,我应该使用
& > button
还是& > Button
? Both are working, but I am confused, in the end, what to be displayed to browser is button
, so it is better to use & > button
?两者都在工作,但我很困惑,最后,要显示给浏览器的是
button
,所以最好使用& > button
?
Question 1 : JSS and other third-party React libraries such as styled-components under the hood use SCSS (Sass) to provide CSS-in-JS.问题 1 :JSS 和其他第三方 React 库(例如引擎盖下的 styled-components)使用 SCSS(Sass)来提供 CSS-in-JS。
You have not seen &
in CSS because it is a SCSS (Sass) feature.你在 CSS 中没有见过
&
因为它是一个 SCSS (Sass) 特性。 Sass is a preprocessor scripting language that extends the normal CSS with more features: Sass 是一种预处理脚本语言,它扩展了普通 CSS 的更多功能:
&
is the parent selector. &
是父选择器。 It references the HTML element where it is nested. In this case &
references root
since it is directly nested inside it.在这种情况下
&
引用root
因为它直接嵌套在它里面。 & > *
applies the styling to all elements ( *
) that are direct descendants ( >
) of root ( &
). & > *
将样式应用于根 ( &
) 的直接后代 ( >
) 的所有元素 ( *
)。
root: {
'& > *': {
margin: theme.spacing(1),
}
}
Example : &
can make you life easier, a good example is applying a hover state to a button.示例:
&
可以让您的生活更轻松,一个很好的示例是将悬停状态应用于按钮。
In normal CSS you would do this:在普通的 CSS 中,你会这样做:
button {
background-color: tomato;
}
button:hover {
opacity: 0.5;
}
With SCSS you could use nesting and the parent selector ( &
) to do this:使用 SCSS,您可以使用嵌套和父选择器 (
&
) 来执行此操作:
button {
background-color: tomato;
&:hover {
opacity: 0.5;
}
}
Question 2 : In ReactJS components start with an uppercase letter while HTML Elements start with a lowercase letter.问题 2 :在 ReactJS 中,组件以大写字母开头,而 HTML 元素以小写字母开头。 So
Button
is a React component and button
is the vanilla HTML element.所以
Button
是一个 React 组件,而button
是普通的 HTML 元素。
You can create a Button
component that is made of a button
with an img
and a p
inside.您可以创建一个
Button
是由一组分button
与img
和p
内。
& > Button
will select all Button
react components that are direct descendant of & (The value of & depends on the rest of your code, with the information I gave you above you'll be able to figure it out) while & > will select all
button` HTML elements that are direct descendents of &. & > Button
将选择所有& > Button
直接后代的Button
反应组件(& 的值取决于您的代码的其余部分,根据我上面提供的信息,您将能够弄清楚)而& > will select all
按钮的 HTML 元素都是 & 的直接后代。
Example : Imagine a situation where you have div
that contains a Button
React Component (has a button HTML element in its composition) and a ToggleButton
React Component (has a button HTML element in its composition):示例:假设您有一个
div
,其中包含一个Button
React 组件(其组合中有一个按钮 HTML 元素)和一个ToggleButton
React 组件(其组合中有一个按钮 HTML 元素):
& > Button
, you only will select the button
HTML element in the Button
that is a direct descendant of the div
( &
).& > Button
,您将只选择Button
中作为div
( &
) 直接后代的button
HTML 元素。& > button
, you only will select the button
HTML element in Button
and in ToggleButton
that are direct descendants of the div
( &
).& > button
,您将只选择Button
和ToggleButton
中的button
HTML 元素,它们是div
( &
) 的直接后代。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.