如何更改第三方 React 組件的顏色？

Question

我正在使用一個名為vertical-timeline-component-react的 React 庫。 https://developer.aliyun.com/mirror/npm/package/vertical-timeline-component-react

    <Fragment>
      <Timeline>
        <Content>
          <ContentYear
            startMonth="12"
            monthType="text"
            startDay="24"
            startYear="2016"
          />
          <ContentBody style={{color: 'red'}} title="Amazing Title">
          </ContentBody>
        </Content>
        <Content>
          <ContentYear
            startMonth="12"
            monthType="text"
            startDay="24"
            startYear="2016"
          />
          <ContentBody title="Amazing Title">
          </ContentBody>
        </Content>
      </Timeline>
    </Fragment>

我使用了示例中提供的示例代碼，它呈現了兩個Content組件。 我想要做的是更改ContentBody中文本的顏色，並使每個組件的顏色不同。

如您所見，我嘗試使用內聯樣式<ContentBody style={{color: 'red'}} title="Amazing Title"> ，但沒有成功。

然后我嘗試檢查元素，發現文本正文的 className 是.jertxS 。 然后我創建了一個styles.css來更改 class 的字體顏色。 它有效，但適用於所有ContentBody 。 我想要的是讓它們不同 colors。

看起來圖書館沒有提供模板來做這件事。 在這種情況下，自定義顏色的方法是什么？

Answer 1

如有疑問，請檢查源代碼。 我們生活在一個美好的時代，您安裝的大多數 npm 軟件包都有公共源代碼。 該庫的源代碼在github上，您可以在此處查看 ContentBody 組件在做什么

const ContentBody = (props) => {
    const { title, children } = props;

    return (
        <BodyComponent className='body-component'>
            <BodyComponentTitle className='title-body-component'>
                {title}
            </BodyComponentTitle>
            {children}
        </BodyComponent>
    );
};

看起來他們正在使用您可以定位的“body-component”的 static 類名。 他們似乎沒有通過 props 傳遞 style 或 className，所以你必須使用你得到的東西，或者 fork 和擴展庫以滿足你的需求，並且可以選擇推遲你的更改，以便其他人可以受益。

根據您的更改的激進程度，您還可以將 src 文件復制到您的項目中並開始直接更改和使用它們。 該項目是 MIT 許可的，因此您可以自由地將代碼嵌入到您的應用程序中。

Answer 2

小心使用 class，因為它可能會在您的下一個版本中改變。

首先檢查他們的 API 中是否有任何顏色道具。 如果沒有，請檢查是否會傳遞“className”。 如果沒有，請使用更復雜的 css 選擇器，例如 'div > div:nth-of-type >...'

Answer 3

就像@Alan P 說的那樣，嘗試添加一個 className 屬性並在 css 文件中寫入 class 。

組件.js

<ContentBody className="red-color" title="Amazing Title">
</ContentBody>

索引.css

.red-color{ color: red !important }

那應該覆蓋當前的顏色樣式