React函数式组件返回SVG遇style属性错误，求解决及替代方案

Hey there! Let's tackle that error you're facing with your SVG React component, then go over some easy alternatives for using SVGs in React since you're new to the framework.

First, let's understand why you're seeing that error: React's style prop expects a JavaScript object of key-value pairs (where keys are CSS property names, usually in camelCase, and values are the style values), not a string like you'd write in plain HTML.

In your code, your styles.fill is a string "fill: skyblue"—that's what's causing the problem. Here's how to fix it:

Corrected Code #

import React from 'react';

const TwitterIcon = () => {
  return (
    <svg viewBox="328 355 335 276" xmlns="http://www.w3.org/2000/svg">
      {/* Use a valid style object here */}
      <path 
        d="M 630, 425A 195, 195 0 0 1 331, 600A 142, 142 0 0 0 428, 570A 70, 70 0 0 1 370, 523 A 70, 70 0 0 0 401, 521A 70, 70 0 0 1 344, 455 A 70, 70 0 0 0 372, 460A 70, 70 0 0 1 354, 370A 195, 195 0 0 0 495, 442A 67, 67 0 0 1 611, 380 A 117, 117 0 0 0 654, 363A 65, 65 0 0 1 623, 401A 117, 117 0 0 0 662, 390A 65, 65 0 0 1 630, 425Z" 
        style={styles.fillStyle}
      />
    </svg>
  );
}

// Define styles as a valid object: property name + value
const styles = {
  fillStyle: {
    fill: "skyblue"
  }
}

export default TwitterIcon;

For even simpler cases, you can skip the separate styles object and write the style directly inline:

<path 
  d="..."
  style={{ fill: "skyblue" }}
/>

If you want more flexible options for working with SVGs in React, here are three common approaches perfect for beginners:

• Import SVG as a React Component
  Tools like Create React App, Vite, or Next.js let you import SVGs directly as React components. This lets you pass props like style, width, or height easily:

  import TwitterIcon from './twitter-icon.svg';
  
  const MyComponent = () => {
    return <TwitterIcon style={{ fill: "skyblue" }} width="50" height="50" />;
  }
  

• Inline SVG with CSS Classes
  Move your styles to a CSS file and use class names instead of inline styles. This is great for reusable or complex styles:

  import React from 'react';
  import './TwitterIcon.css';
  
  const TwitterIcon = () => {
    return (
      <svg viewBox="328 355 335 276" xmlns="http://www.w3.org/2000/svg" className="twitter-icon">
        <path d="..." />
      </svg>
    );
  }
  

  Then in TwitterIcon.css:

  .twitter-icon path {
    fill: skyblue;
  }
  

• Use SVG as an Image
  If you don't need to modify the SVG's internal styles, you can use it like a regular image with the <img> tag:

  const TwitterIcon = () => {
    return <img src="/twitter-icon.svg" alt="Twitter icon" width="50" height="50" />;
  }
  

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