React中如何为组件Prop里的item.specTitle添加类名或内联样式？

Hey there! As you're new to React and Ant Design, let's walk through how to style item.specTitle in your List component. The key here is to split specTitle and specDescription into separate elements (instead of concatenating them as plain strings) — this way you can target specTitle specifically for styling.

Option 1: Inline Styles #

You can use React's inline style prop to directly apply styles to the specTitle element. Wrap item.specTitle in a <span> and pass a style object (remember to use camelCase for CSS properties like fontWeight instead of font-weight):

const spec1 = [
  {specTitle: "Size", specDescription: "Large suitcase."},
  {specTitle: "Color", specDescription: "Red car."},
  {specTitle: "Other", specDescription: "Other here."},
];

// ...

<List dataSource={spec1} renderItem={item => (
  <List.Item>
    <List.Item.Meta 
      description={
        <>
          <span style={{ fontWeight: 'bold', color: '#2563eb', marginRight: '8px' }}>
            {item.specTitle}:
          </span>
          {item.specDescription}
        </>
      } 
    />
  </List.Item>
)} />

Option 2: Custom Class Name #

For reusable styles (a better practice if you'll use this style elsewhere), define a CSS class and apply it to the specTitle span:

First, add this to your CSS file:

.spec-title {
  font-weight: bold;
  color: #2563eb;
  margin-right: 8px;
}

Then import the CSS file into your React component and use the className prop:

// Import your CSS file (adjust the path to match your project structure)
import './component-styles.css';

const spec1 = [
  {specTitle: "Size", specDescription: "Large suitcase."},
  {specTitle: "Color", specDescription: "Red car."},
  {specTitle: "Other", specDescription: "Other here."},
];

// ...

<List dataSource={spec1} renderItem={item => (
  <List.Item>
    <List.Item.Meta 
      description={
        <>
          <span className="spec-title">{item.specTitle}:</span>
          {item.specDescription}
        </>
      } 
    />
  </List.Item>
)} />

Both approaches work well — inline styles are perfect for one-off tweaks, while class names are ideal for maintaining consistent, reusable styles across your app.

内容的提问来源于stack exchange，提问作者changshou