Question

最初，我有一个样式表，如下所示：

.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}
    />
  );
}

然而，使用这种硬编码的背景颜色，我无法找到任何方式来使其具有与转换相同的效果，而无需将其转换为具有onMouseEnter和onMouseLeave处理程序的完整组件应用rgba颜色。

使用CSS有没有更好的方法呢？

Answer 1

执行此操作的“正确”（最佳做法）方法是使用<button className={styles.button + " " + accent1} {...props} />的值作为类名，并在按钮上指定它，如下所示：

accent1

然后在你的CSS中，你需要为它创建一个类。因此，如果.exampleClass { background-color: "..."; }的值是“exampleClass”，那么您需要一个像这样的CSS块：

!important

如果必须保持内联样式，那么应该有效的替代解决方案是将&:hover { background-color: transparentize($green, 0.2) !important; }放在悬停样式上：

!important

但是使用<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.jfdimarzio.test_gps_1"> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.INTERNET" /> </manifest>通常不是一种好的做法，并且经常导致难以调试的样式问题。

Answer 2

相信这更像是一般的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类的所有元素。现在选择那些也是按钮元素类型的那些。这是更具体的，并将赢得与常见主题库（如bootstrap）的特异性战争。

在悬停时将透明度应用于内联背景颜色

2 个答案: