英文:
CSS `background-image` not working with `all: unset`?
问题
我正在开发一个库，其中包含一个我正在编写的<hr />的样式化组件。
该库有一个根元素/组件，使用all: initial来填充诸如font-size之类的属性，用于更改组件的相对大小。然而，我遇到了一个问题，我想在所有其他组件上使用all: unset。
这似乎在我设置在<hr />上的background-image上出现问题（在生产中而不是storybook中？）。
以下是一个自包含的示例：
export default function App() {
const [toggle, setToggle] = React.useState(true);
return (
<div style={{ all: 'initial' }}>
<h1>
为什么这里的<code>background-image</code>不显示？
</h1>
<hr
style={{
...(toggle ? { all: 'unset' } : {}),
border: 'none',
backgroundRepeat: `no-repeat`,
backgroundSize: `100% 0.05em`,
backgroundPosition: `center`,
backgroundImage: `linear-gradient( 90deg, rgba(0,0,0,0) 0%, hsl(0, 200%, 90%) 10%, hsl(0, 200%, 90%) 48%, rgba(0,0,0,0) 48%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 52%, hsl(0, 200%, 90%) 52%, hsl(0, 200%, 90%) 90%, rgba(0,0,0,0) 100%)`,
color: `hsl(0, 0%, 20%)`,
textAlign: `center`,
height: `0.75em`,
}}
/>
<button
onClick={() => {
setToggle((t) => !t);
}}
>
{!toggle ? "添加 'all: unset'" : "移除 'all unset'"}
</button>
</div>
);
}
问题出在哪里？肯定是某个unset属性，对吧？但我一直没有找到导致这种行为的属性。
这无论是在React/JSX/webpack中都会发生。
英文:
I'm working on a stylized <hr /> in a library that I'm writing.
This library has a root element/component that uses all: initial to populate things like font-size which is used to change the relative size of the component. However, I'm running into a problem where I want to use all: unset on all other components.
This seems to break (in production but not storybook?) the background-image that I have set on my <hr />.
Here is a self contained example:
export default function App() {
const [toggle, setToggle] = React.useState(true);
return (
<div style={{ all: 'initial' }}>
<h1>
Why is <code>background-image</code> not shoing here?
</h1>
<hr
style={{
...(toggle ? { all: 'unset' } : {}),
border: 'none',
backgroundRepeat: `no-repeat`,
backgroundSize: `100% 0.05em`,
backgroundPosition: `center`,
backgroundImage: `linear-gradient( 90deg, rgba(0,0,0,0) 0%, hsl(0, 200%, 90%) 10%, hsl(0, 200%, 90%) 48%, rgba(0,0,0,0) 48%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 52%, hsl(0, 200%, 90%) 52%, hsl(0, 200%, 90%) 90%, rgba(0,0,0,0) 100%)`,
color: `hsl(0, 0%, 20%)`,
textAlign: `center`,
height: `0.75em`,
}}
/>
<button
onClick={() => {
setToggle((t) => !t);
}}
>
{!toggle ? "Add 'all: unset'" : "Remove 'all unset'"}
</button>
</div>
);
}
Here is a StackBlitz of the problem as well.
What am I missing here? It has to be an unset property, right?
But I haven't been able to find the one that's causing this behavior.
This happens regardless of React/JSX/webpack.
答案1
得分: 1
有2个问题：
关于CSS的all属性：
它设置了所有属性，包括基本属性，所以你必须在unset之后手动设置它们：
<hr
style={{
...(toggle ? { all: 'unset' } : {}),
+ width: '100%',
+ display: 'block',
+ position: 'relative',
border: 'none',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 0.05em',
backgroundPosition: 'center',
backgroundImage: 'linear-gradient( 90deg, rgba(0,0,0,0) 0%, hsl(0, 200%, 90%) 10%, hsl(0, 200%, 90%) 48%, rgba(0,0,0,0) 48%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 52%, hsl(0, 200%, 90%) 52%, hsl(0, 200%, 90%) 90%, rgba(0,0,0,0) 100%)',
color: 'hsl(0, 0%, 20%)',
textAlign: 'center',
height: '0.75em',
}}
/>
关于React的all属性：
关于React的all，在HTML中使用all: <value>代替，React会列出所有未设置的属性，这会导致其他属性被移除。解决方法是使用style的对象而不是类。
如果只渲染一次而不打开和关闭all，那么你不需要担心这个问题。
英文:
Has 2 problems:
About all of CSS:
it sets all the properties of course including the base ones so you have to manually set them after unset:
<hr
style={{
...(toggle ? { all: 'unset' } : {}),
+ width: '100%',
+ display: 'block',
+ position: 'relative',
border: 'none',
backgroundRepeat: `no-repeat`,
backgroundSize: `100% 0.05em`,
backgroundPosition: `center`,
backgroundImage: `linear-gradient( 90deg, rgba(0,0,0,0) 0%, hsl(0, 200%, 90%) 10%, hsl(0, 200%, 90%) 48%, rgba(0,0,0,0) 48%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 52%, hsl(0, 200%, 90%) 52%, hsl(0, 200%, 90%) 90%, rgba(0,0,0,0) 100%)`,
color: `hsl(0, 0%, 20%)`,
textAlign: `center`,
height: `0.75em`,
}}
/>
About all of React:
about all instead of putting all: <value> in html react lists all unset attributes which causes other attributes to be removed the solution is to use class instead of object for style
> if you only render once without turning all on and off then you don't need to worry about this problem
答案2
得分: 0
display: inline属性会阻止height产生效果。
尝试将display设置为除inline之外的其他值。
英文:
From chrome F12:
The display: inline property prevents height from having an effect.
Try setting display to something other than inline.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论