应用透明度内嵌背景色上悬停

我本来这看起来如下样式表：应用透明度内嵌背景色上悬停

.button { 
    border-radius: 3px; 
    display: inline-block; 
    padding: 14px 20px; 
    transition: background-color cubic-bezier(0.4, 0.0, 0.2, 1.0) 300ms; 

    &:hover { 
    background-color: transparentize($green, 0.2); 
    } 
}

这工作得很好。然而，我不得不内联我的backgroundColor，使其与主题组件一起工作。

import { accent1 } from 'themes/default'; 

export default function Button({ ...props }, { 
    theme: { accent1 } = { accent1 } 
}) { 
    return (
    <button 
     className={styles.button} 
     style={{ backgroundColor: accent1 }} 
     {...props} 
    /> 
); 
}

然而，这种硬编码的背景颜色，我找不到任何方式给它转变同样的效果而不适用的rgba一个onMouseEnter和onMouseLeave处理程序把它变成一个完全成熟的组件颜色。

有没有更好的方法来做到这一点与CSS？

来源

2017-02-28 corvid

您可以不使用硬编码的样式，而是在HTML页面上写出一段CSS来模仿您最初使用自定义类所使用的内容吗？ – TerraElise

“正确”（最佳实践）的方式来做到这一点，而不是使用accent1值作为一个类的名称，并指定它在你的按钮，像这样：

<button 
    className={styles.button + " " + accent1} 
    {...props} 
/>

，然后在CSS，你需要为它做一个类。所以如果accent1值是“ExampleClass中”，你需要这样的CSS块：

.exampleClass { 
    background-color: "..."; 
}

另一种解决方案，应该工作，如果你必须保持你的内联样式是把!important上hover样式：

&:hover { 
    background-color: transparentize($green, 0.2) !important; 
}

但使用!important通常是不好的做法，往往导致的造型问题，可以是难以调试。

来源

2017-02-28 22:39:44 erikamjoh

相信这是一个普通的CSS问题，很可能你不必使用内联样式。哪种风格先例是基于选择器的特异性。正如你所指出的，切换到内联样式赢得了特异性战争，样式在确切的元素。

大多数主题库使用普通类如.btn或.header。原因是 - 这些很容易被全球人士所诟病。在这里做一个假设，你的主题使用.button来设置所有按钮的样式。比这更具体，通过在类上加上类型选择符来赢得特异性战争。这看起来像：

button.button { 
    border-radius: 3px; 
    display: inline-block; 
    padding: 14px 20px; 
    transition: background-color cubic-bezier(0.4, 0.0, 0.2, 1.0) 300ms; 

    &:hover { 
    background-color: transparentize($green, 0.2); 
    } 
}

CSS实际上是从右到左处理的。所以这读作为，去找所有与.button类的元素。现在选择那些也是按钮元素类型的元素。这是更具体的，将赢得与普通主题库（如自举）的特异性战争。

来源

2017-03-01 21:13:57

应用透明度内嵌背景色上悬停

回答

相关问题