为什么css不适用？

Question

import React from 'react';
import styled from 'styled-components';

const Thing = styled.div`
  color: blue;

  .something {
    border: 1px solid; // an element labeled ".something" inside <Thing>
    display: block;
  }
`;

const Something = () => {
  return (
    <Thing>
      <label htmlFor="foo-button" className="something">
        Mystery button
      </label>
      <button id="foo-button">What do I do?</button>
    </Thing>
  );
};

我写了这样的代码，我希望按钮字体颜色也应用蓝色。但按钮的字体颜色只是黑色。为什么？

Answer 1

看看这篇文章

根据这个答案：

这是因为它们是用户界面元素，默认情况下采用用户操作系统的外观。至少，他们曾经是。现在不同的浏览器使用不同的默认样式，但它们通常非常相似。

您可以在按钮上添加

color: inherit

以获得您想要的结果