如何更改第三方 React 组件的颜色？

Question

I am using a React library called vertical-timeline-component-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>

I used the sample code provided in the example, which renders two Content components. What I want to do is to change the color of the text in the ContentBody and make the color different for each component.

As you can see, I tried using inline styling <ContentBody style={{color: 'red'}} title="Amazing Title"> , but it didn't work.

Then I tried to inspect the element and found out that the className of the text body is .jertxS . I then created a styles.css to change the font color of the class. It worked, but it applies to all ContentBody s. What I want is to have them different colors.

It seems like the library doesn't provide a template for doing it. In this case, what is the way to customize the color?

Answer 1

When in doubt, check the source code. We live in a wonderful time where most npm packages you install have public source code. This library's source is ongithub and you can view what the ContentBody component is doing here

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

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

It looks like they are using a static className of 'body-component' that you might be able to target. It does not appear that they are passing style or className thru from props so you have to work with what you got, or fork and extend the library to meet your needs and optionally push back your changes so others can benefit.

Depending on how radical your changes are you can also just copy the src files into your project and start altering and consuming them directly. The project is MIT licensed so your are free to embed the code in your app.

Answer 2

Careful using that class, as it may change on your next build.

First check if they have any colour prop in their API. If not, check if passing in a “className” will stick. If not, use a more complex css selector like 'div > div:nth-of-type >...'

Answer 3

Like @Alan P said, try adding a className attribute and write a class in your css file.

component.js

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

index.css

.red-color{ color: red !important }

That should override the current color styling