React.js：SVGの特定の要素のインラインスタイリング？

Question

私は現在Reactを学んでいるところですが、私はSVGの「svg-react-loader」をインポートしています。インラインスタイルを使用してSVGの一部をスタイルする方法があるかどうか疑問に思っていましたか？たとえば、svgにrectとcircleの要素がある場合、その2つの図形のスタイルを異なるようにすることは可能ですか？私の直感は次のようなものでした：

var style = { 
    '.rect': { 
     stroke:"green" 
    }, 
    '.circle': { 
     stroke:"red" 
    } 
} 

render() { 
    return (<TestSVG style={style}/>) 
}; 

もちろん、これは動作しません。どんな助けもありがとうございます。

ありがとうございます！

Answer 1

ReactJSスタイルが有効なJSONですが、JSONが無効であることがわかりました。下記で更新してください。動作しているはずです。

var style = { 
    ".rect": { 
     "stroke":"green" 
    }, 
    ".circle": { 
     "stroke":"red" 
    } 
}