{"id":258,"date":"2020-05-13T16:46:01","date_gmt":"2020-05-13T14:46:01","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2020\/05\/13\/styling-react-components-using-stratos-design-tokens\/"},"modified":"2021-05-17T11:04:38","modified_gmt":"2021-05-17T09:04:38","slug":"styling-react-components-using-stratos-design-tokens","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/styling-react-components-using-stratos-design-tokens\/","title":{"rendered":"Styling React Components Using Stratos Design Tokens"},"content":{"rendered":"<figure><\/figure>\n<div class=\"boldgrid-section\">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\n<p class=\"\">If seeing is believing, then I guess we need to show as much as possible of what you can do with <em>Stratos Tokens App<\/em>.<\/p>\n<p class=\"\"><strong>TLDR; <\/strong>A complete code example is available on CodeSandbox <a href=\"https:\/\/codesandbox.io\/s\/elastic-gagarin-iiz92\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>.<\/p>\n<p class=\"\">In this article I\u2019ll show you how to take your design decisions (design tokens) from your design document, publish them to <em>NPMjs<\/em> and then use them to style <em>React<\/em> components using <em>Styled Components<\/em>. This all without even having to open a design tool! Also, I\u2019ll not be using <em>Style Dictionary<\/em>(!)<\/p>\n<p>In this demo I\u2019ll be using <em>Sketch App<\/em>, but <em>Figma<\/em> and <em>InVision<\/em> <em>Studio<\/em> are supported as well.<\/p>\n<blockquote class=\"\">\n<p style=\"text-align: center;\">This demo is done completely <strong>without<\/strong> opening a design&nbsp;tool!<\/p>\n<\/blockquote>\n<h3 class=\"\">Publishing to&nbsp;NPMjs<\/h3>\n<p class=\"\">There is <em>no need<\/em> to open the design file (All you need is to have read access to it). This is just to show you the content of the design file this demo is based upon.<\/p>\n<figure id=\"attachment_281\" aria-describedby=\"caption-attachment-281\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/8ab81-1w5zpdeqqh3tivwoe7wzf8a.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-281 size-full\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/8ab81-1w5zpdeqqh3tivwoe7wzf8a.png\" alt=\"\" width=\"800\" height=\"298\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/8ab81-1w5zpdeqqh3tivwoe7wzf8a.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/8ab81-1w5zpdeqqh3tivwoe7wzf8a-300x112.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/8ab81-1w5zpdeqqh3tivwoe7wzf8a-768x286.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/8ab81-1w5zpdeqqh3tivwoe7wzf8a-250x93.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/8ab81-1w5zpdeqqh3tivwoe7wzf8a-550x205.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/8ab81-1w5zpdeqqh3tivwoe7wzf8a-483x180.png 483w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><figcaption id=\"caption-attachment-281\" class=\"wp-caption-text\">Structure in the demo design&nbsp;document<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<figure class=\"wp-caption\">\n<p class=\"mod-reset\">&nbsp;<\/p><figcaption class=\"wp-caption-text\"><\/figcaption><\/figure>\n<div class=\"boldgrid-section\">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\n<h4 class=\"\">Very important!<\/h4>\n<p class=\"\">Every <strong>package name<\/strong> on <em>NPMjs<\/em> needs to be <strong>unique<\/strong> unless it\u2019s a new version of an already existing package. I\u2019ll be naming my NPM package <em>stratostokens-react-demo<\/em>, which means you can\u2019t name yours s<em>tratostokens-react-demo<\/em>! You have to pick your own name \u2705<\/p>\n<h3 class=\"\">The magic steps to NPM super-duperness<\/h3>\n<ul class=\"\">\n<li>Open Stratos Tokens App and, on the start screen, create a new project. This is where you give your project a (great) name, decides where it should live and which design file it should use as input to Stratos Tokens\u2019 render engine.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<figure>\n<p class=\"\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/1f5b9-1yjzzrlfh6nbfnnfiogfaca.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-282 size-full\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/1f5b9-1yjzzrlfh6nbfnnfiogfaca.png\" alt=\"\" width=\"800\" height=\"267\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/1f5b9-1yjzzrlfh6nbfnnfiogfaca.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/1f5b9-1yjzzrlfh6nbfnnfiogfaca-300x100.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/1f5b9-1yjzzrlfh6nbfnnfiogfaca-768x256.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/1f5b9-1yjzzrlfh6nbfnnfiogfaca-250x83.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/1f5b9-1yjzzrlfh6nbfnnfiogfaca-550x184.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/1f5b9-1yjzzrlfh6nbfnnfiogfaca-539x180.png 539w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p class=\"mod-reset\">&nbsp;<\/p>\n<\/figure>\n<div class=\"boldgrid-section\">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\n<ul class=\"\">\n<li>Click on the artboard\/canvas named <em>Color. <\/em>This will add <em>color.js <\/em>and<em> color.json <\/em>to your Stratos Tokens project.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<figure>\n<p class=\"\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/31ae3-1hzv7oguh2dsnqteqfffyng.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-283 size-full\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/31ae3-1hzv7oguh2dsnqteqfffyng.png\" alt=\"\" width=\"800\" height=\"422\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/31ae3-1hzv7oguh2dsnqteqfffyng.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/31ae3-1hzv7oguh2dsnqteqfffyng-300x158.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/31ae3-1hzv7oguh2dsnqteqfffyng-768x405.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/31ae3-1hzv7oguh2dsnqteqfffyng-250x132.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/31ae3-1hzv7oguh2dsnqteqfffyng-550x290.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/31ae3-1hzv7oguh2dsnqteqfffyng-341x180.png 341w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/31ae3-1hzv7oguh2dsnqteqfffyng-569x300.png 569w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<\/figure>\n<div class=\"boldgrid-section\">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\n<ul>\n<li>Click on the artboard\/canvas named <em>Typography. <\/em>This will add <em>typopgraphy.js <\/em>and<em> typography.json <\/em>to your Stratos Tokens project.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<figure>\n<p class=\"\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/95c93-1jklvtqk7lhindjmnuvqm9q.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-284 size-full\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/95c93-1jklvtqk7lhindjmnuvqm9q.png\" alt=\"\" width=\"800\" height=\"501\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/95c93-1jklvtqk7lhindjmnuvqm9q.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/95c93-1jklvtqk7lhindjmnuvqm9q-300x188.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/95c93-1jklvtqk7lhindjmnuvqm9q-768x481.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/95c93-1jklvtqk7lhindjmnuvqm9q-250x157.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/95c93-1jklvtqk7lhindjmnuvqm9q-550x344.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/95c93-1jklvtqk7lhindjmnuvqm9q-287x180.png 287w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/95c93-1jklvtqk7lhindjmnuvqm9q-479x300.png 479w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/95c93-1jklvtqk7lhindjmnuvqm9q-798x500.png 798w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p class=\"mod-reset\">&nbsp;<\/p>\n<\/figure>\n<div class=\"boldgrid-section\">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\n<ul class=\"\">\n<li>Click on the download icon to the left and then on <em>Download NPM<\/em><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<figure>\n<p class=\"\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/ba445-1ha_keeellfdzibvcr57rqg.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-285 size-full\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/ba445-1ha_keeellfdzibvcr57rqg.png\" alt=\"\" width=\"648\" height=\"464\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/ba445-1ha_keeellfdzibvcr57rqg.png 648w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/ba445-1ha_keeellfdzibvcr57rqg-300x215.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/ba445-1ha_keeellfdzibvcr57rqg-250x179.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/ba445-1ha_keeellfdzibvcr57rqg-550x394.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/ba445-1ha_keeellfdzibvcr57rqg-251x180.png 251w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/ba445-1ha_keeellfdzibvcr57rqg-419x300.png 419w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/ba445-1ha_keeellfdzibvcr57rqg-210x150.png 210w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/ba445-1ha_keeellfdzibvcr57rqg-400x285.png 400w\" sizes=\"auto, (max-width: 648px) 100vw, 648px\" \/><\/a><\/p>\n<p class=\"mod-reset\">&nbsp;<\/p>\n<\/figure>\n<div class=\"boldgrid-section\">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\n<ul class=\"\">\n<li>Store the project anywhere you like<\/li>\n<li>Open the file <em>package.json<\/em> in your <strong>downloaded NPM project\u2019s folder <\/strong>using your favorite code editor<\/li>\n<li>Enter a name on line 2 (this will be the name of the NPM package)<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<figure>\n<p class=\"\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/42f54-1fzd790qummk-h9xfshhxdq.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-286 size-full\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/42f54-1fzd790qummk-h9xfshhxdq.png\" alt=\"\" width=\"800\" height=\"642\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/42f54-1fzd790qummk-h9xfshhxdq.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/42f54-1fzd790qummk-h9xfshhxdq-300x241.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/42f54-1fzd790qummk-h9xfshhxdq-768x616.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/42f54-1fzd790qummk-h9xfshhxdq-250x201.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/42f54-1fzd790qummk-h9xfshhxdq-550x441.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/42f54-1fzd790qummk-h9xfshhxdq-224x180.png 224w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/42f54-1fzd790qummk-h9xfshhxdq-374x300.png 374w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/42f54-1fzd790qummk-h9xfshhxdq-623x500.png 623w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p class=\"mod-reset\">&nbsp;<\/p>\n<\/figure>\n<div class=\"boldgrid-section\">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\n<ul class=\"\">\n<li>Open <em>Terminal App<\/em><\/li>\n<li>Go to your <strong>downloaded NPM project\u2019s folder<\/strong> (I\u2019ve named mine <em>demo-npm-tokens<\/em>)<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<figure>\n<p class=\"\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/84df0-1osc7kdnkhyqplwslgrvqta.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-287 size-full\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/84df0-1osc7kdnkhyqplwslgrvqta.png\" alt=\"\" width=\"800\" height=\"512\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/84df0-1osc7kdnkhyqplwslgrvqta.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/84df0-1osc7kdnkhyqplwslgrvqta-300x192.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/84df0-1osc7kdnkhyqplwslgrvqta-768x492.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/84df0-1osc7kdnkhyqplwslgrvqta-250x160.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/84df0-1osc7kdnkhyqplwslgrvqta-550x352.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/84df0-1osc7kdnkhyqplwslgrvqta-281x180.png 281w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/84df0-1osc7kdnkhyqplwslgrvqta-469x300.png 469w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/84df0-1osc7kdnkhyqplwslgrvqta-781x500.png 781w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p class=\"mod-reset\">&nbsp;<\/p>\n<\/figure>\n<div class=\"boldgrid-section\">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\n<ul class=\"\">\n<li>If this is your <em>first time uploading a package <\/em>to <em>NPM<\/em> you need to <em>login<\/em><\/li>\n<li>Enter <em>npm login<\/em> and enter your credentials (you need an account at <a href=\"https:\/\/www.npmjs.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">www.npmjs.com<\/a>)<\/li>\n<li>Enter <em>npm install<\/em> (a bunch of texts will flash by, no worries, this is ok)<\/li>\n<li>Enter <em>npm run build<\/em> (more text will flash by, this is also ok)<\/li>\n<li>Enter <em>npm publish<\/em> (even more ok text)<\/li>\n<li>The design tokens are now available on NPMjs as the package <em>stratostokens-react-demo<\/em>!<\/li>\n<\/ul>\n<h3>Installing the NPM&nbsp;package<\/h3>\n<p class=\"\">You install your NPM package by, in the root folder of the React project you would like to use your design tokens in, enter:<\/p>\n<blockquote class=\"\">\n<p style=\"text-align: center;\">npm install &#8211;save stratostokens-react-demo<\/p>\n<\/blockquote>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<figure class=\"wp-caption\">\n<figure id=\"attachment_288\" aria-describedby=\"caption-attachment-288\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/5f520-1e4sh1vdpp4ckgs91xml4sw.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-288 size-full\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/5f520-1e4sh1vdpp4ckgs91xml4sw.png\" alt=\"\" width=\"800\" height=\"201\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/5f520-1e4sh1vdpp4ckgs91xml4sw.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/5f520-1e4sh1vdpp4ckgs91xml4sw-300x75.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/5f520-1e4sh1vdpp4ckgs91xml4sw-768x193.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/5f520-1e4sh1vdpp4ckgs91xml4sw-250x63.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/5f520-1e4sh1vdpp4ckgs91xml4sw-550x138.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/5f520-1e4sh1vdpp4ckgs91xml4sw-716x180.png 716w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><figcaption id=\"caption-attachment-288\" class=\"wp-caption-text\">demo_studio is the name of the React project in which I would like to use my Stratos design&nbsp;tokens<\/figcaption><\/figure>\n<p class=\"mod-reset\">&nbsp;<\/p><figcaption class=\"wp-caption-text\"><\/figcaption><\/figure>\n<div class=\"boldgrid-section\">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\n<h3>Styling React components with your design&nbsp;tokens<\/h3>\n<p class=\"\">In your code you can access your design tokens like this:<\/p>\n<figure id=\"attachment_289\" aria-describedby=\"caption-attachment-289\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/44535-1zonvnsjj1z__wm_eka7qdw.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-289 size-full\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/44535-1zonvnsjj1z__wm_eka7qdw.png\" alt=\"\" width=\"800\" height=\"335\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/44535-1zonvnsjj1z__wm_eka7qdw.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/44535-1zonvnsjj1z__wm_eka7qdw-300x126.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/44535-1zonvnsjj1z__wm_eka7qdw-768x322.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/44535-1zonvnsjj1z__wm_eka7qdw-250x105.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/44535-1zonvnsjj1z__wm_eka7qdw-550x230.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/44535-1zonvnsjj1z__wm_eka7qdw-430x180.png 430w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/44535-1zonvnsjj1z__wm_eka7qdw-716x300.png 716w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><figcaption id=\"caption-attachment-289\" class=\"wp-caption-text\">Styling your React components using Styled Components<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<figure class=\"wp-caption\">\n<p class=\"mod-reset\">&nbsp;<\/p><figcaption class=\"wp-caption-text\"><\/figcaption><\/figure>\n<div class=\"boldgrid-section\">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\n<p class=\"\">or using <em>Styled Components\u2019 ThemeProvider<\/em><\/p>\n<figure id=\"attachment_290\" aria-describedby=\"caption-attachment-290\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/45e78-1hfu64vqoltd9vlxufr1feg.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-290 size-full\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/45e78-1hfu64vqoltd9vlxufr1feg.png\" alt=\"\" width=\"800\" height=\"242\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/45e78-1hfu64vqoltd9vlxufr1feg.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/45e78-1hfu64vqoltd9vlxufr1feg-300x91.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/45e78-1hfu64vqoltd9vlxufr1feg-768x232.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/45e78-1hfu64vqoltd9vlxufr1feg-250x76.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/45e78-1hfu64vqoltd9vlxufr1feg-550x166.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/45e78-1hfu64vqoltd9vlxufr1feg-595x180.png 595w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><figcaption id=\"caption-attachment-290\" class=\"wp-caption-text\">Styling your React components using Styled Components\u2019 ThemeProvider<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<figure class=\"wp-caption\">\n<p class=\"mod-reset\">&nbsp;<\/p><figcaption class=\"wp-caption-text\"><\/figcaption><\/figure>\n<div class=\"boldgrid-section\">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\n<h3>A complete&nbsp;example<\/h3>\n<p class=\"\">You can find a complete example on <em>CodeSandbox<\/em>. This example styles <em>React<\/em> components in two different ways:<\/p>\n<ol class=\"\">\n<li>Directly in your<em> React Styled Component<\/em><\/li>\n<li>Via <em>Styled Components\u2019 ThemeProvider<\/em><\/li>\n<\/ol>\n<h3 class=\"\">Related articles<\/h3>\n<p><a href=\"https:\/\/medium.com\/sketch2react\/the-nine-rules-of-stratos-tokens-8ed208f38ba9\">https:\/\/medium.com\/sketch2react\/the-nine-rules-of-stratos-tokens-8ed208f38ba9<\/a><\/p>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\">Thanks for reading!<\/p>\n<p><em>\/Fredrik\u200a\u2014\u200aTeam Sketch2React<\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>If seeing is believing, then I guess we need to show as much as possible of what you can do with Stratos Tokens App. TLDR; A complete code example is available on CodeSandbox here. In this article I\u2019ll show you how to take your design decisions (design tokens) from your design document, publish them to&hellip;&nbsp;<a href=\"https:\/\/sketch2react.io\/blog\/styling-react-components-using-stratos-design-tokens\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">Styling React Components Using Stratos Design Tokens<\/span><\/a><\/p>\n","protected":false},"author":4,"featured_media":261,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"index","bgseo_robots_follow":"follow","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"off","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[166],"tags":[61,59,116,117,136,191],"class_list":["post-258","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-javascript","tag-react","tag-stratosapp","tag-styled-components","tag-token-design","tag-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Styling React Components Using Stratos Design Tokens | Sketch2React Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sketch2react.io\/blog\/styling-react-components-using-stratos-design-tokens\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Styling React Components Using Stratos Design Tokens - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"If seeing is believing, then I guess we need to show as much as possible of what you can do with Stratos Tokens App. TLDR; A complete code example is available on CodeSandbox here. In this article I\u2019ll show you how to take your design decisions (design tokens) from your design document, publish them to&hellip;&nbsp;Read More &raquo;Styling React Components Using Stratos Design Tokens\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/styling-react-components-using-stratos-design-tokens\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-05-13T14:46:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-17T09:04:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/StratosTokensReact@2x.png\" \/>\n\t<meta property=\"og:image:width\" content=\"3840\" \/>\n\t<meta property=\"og:image:height\" content=\"2160\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Fredrik Ward\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fredrik Ward\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sketch2react.io\/blog\/styling-react-components-using-stratos-design-tokens\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/styling-react-components-using-stratos-design-tokens\/\"},\"author\":{\"name\":\"Fredrik Ward\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/d452067d5528ce6cda4be87f136cf664\"},\"headline\":\"Styling React Components Using Stratos Design Tokens\",\"datePublished\":\"2020-05-13T14:46:01+00:00\",\"dateModified\":\"2021-05-17T09:04:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/styling-react-components-using-stratos-design-tokens\/\"},\"wordCount\":627,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/styling-react-components-using-stratos-design-tokens\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/StratosTokensReact@2x.png\",\"keywords\":[\"JavaScript\",\"React\",\"Stratosapp\",\"Styled Components\",\"Token Design\",\"Tutorials\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sketch2react.io\/blog\/styling-react-components-using-stratos-design-tokens\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/styling-react-components-using-stratos-design-tokens\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/styling-react-components-using-stratos-design-tokens\/\",\"name\":\"Styling React Components Using Stratos Design Tokens - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/styling-react-components-using-stratos-design-tokens\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/styling-react-components-using-stratos-design-tokens\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/StratosTokensReact@2x.png\",\"datePublished\":\"2020-05-13T14:46:01+00:00\",\"dateModified\":\"2021-05-17T09:04:38+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/styling-react-components-using-stratos-design-tokens\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/styling-react-components-using-stratos-design-tokens\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/styling-react-components-using-stratos-design-tokens\/#primaryimage\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/StratosTokensReact@2x.png\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/StratosTokensReact@2x.png\",\"width\":3840,\"height\":2160},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/styling-react-components-using-stratos-design-tokens\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Styling React Components Using Stratos Design Tokens\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"name\":\"Sketch2React Blog\",\"description\":\"Articles, tutorials, tips &amp; tricks\",\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sketch2react.io\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\",\"name\":\"Sketch2React Blog\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"width\":512,\"height\":512,\"caption\":\"Sketch2React Blog\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/d452067d5528ce6cda4be87f136cf664\",\"name\":\"Fredrik Ward\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/91605aba05531b0d98ed254dc314b74be1800d1086302db1454b4489c128e3e1?s=96&d=wavatar&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/91605aba05531b0d98ed254dc314b74be1800d1086302db1454b4489c128e3e1?s=96&d=wavatar&r=g\",\"caption\":\"Fredrik Ward\"},\"url\":\"https:\/\/sketch2react.io\/blog\/author\/sewk9wxw3g\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Styling React Components Using Stratos Design Tokens | Sketch2React Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sketch2react.io\/blog\/styling-react-components-using-stratos-design-tokens\/","og_locale":"en_US","og_type":"article","og_title":"Styling React Components Using Stratos Design Tokens - Sketch2React Blog","og_description":"If seeing is believing, then I guess we need to show as much as possible of what you can do with Stratos Tokens App. TLDR; A complete code example is available on CodeSandbox here. In this article I\u2019ll show you how to take your design decisions (design tokens) from your design document, publish them to&hellip;&nbsp;Read More &raquo;Styling React Components Using Stratos Design Tokens","og_url":"https:\/\/sketch2react.io\/blog\/styling-react-components-using-stratos-design-tokens\/","og_site_name":"Sketch2React Blog","article_published_time":"2020-05-13T14:46:01+00:00","article_modified_time":"2021-05-17T09:04:38+00:00","og_image":[{"width":3840,"height":2160,"url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/StratosTokensReact@2x.png","type":"image\/png"}],"author":"Fredrik Ward","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Fredrik Ward","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/styling-react-components-using-stratos-design-tokens\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/styling-react-components-using-stratos-design-tokens\/"},"author":{"name":"Fredrik Ward","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/d452067d5528ce6cda4be87f136cf664"},"headline":"Styling React Components Using Stratos Design Tokens","datePublished":"2020-05-13T14:46:01+00:00","dateModified":"2021-05-17T09:04:38+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/styling-react-components-using-stratos-design-tokens\/"},"wordCount":627,"commentCount":2,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/styling-react-components-using-stratos-design-tokens\/#primaryimage"},"thumbnailUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/StratosTokensReact@2x.png","keywords":["JavaScript","React","Stratosapp","Styled Components","Token Design","Tutorials"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sketch2react.io\/blog\/styling-react-components-using-stratos-design-tokens\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/styling-react-components-using-stratos-design-tokens\/","url":"https:\/\/sketch2react.io\/blog\/styling-react-components-using-stratos-design-tokens\/","name":"Styling React Components Using Stratos Design Tokens - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/styling-react-components-using-stratos-design-tokens\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/styling-react-components-using-stratos-design-tokens\/#primaryimage"},"thumbnailUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/StratosTokensReact@2x.png","datePublished":"2020-05-13T14:46:01+00:00","dateModified":"2021-05-17T09:04:38+00:00","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/styling-react-components-using-stratos-design-tokens\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/styling-react-components-using-stratos-design-tokens\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/styling-react-components-using-stratos-design-tokens\/#primaryimage","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/StratosTokensReact@2x.png","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/05\/StratosTokensReact@2x.png","width":3840,"height":2160},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/styling-react-components-using-stratos-design-tokens\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Styling React Components Using Stratos Design Tokens"}]},{"@type":"WebSite","@id":"https:\/\/sketch2react.io\/blog\/#website","url":"https:\/\/sketch2react.io\/blog\/","name":"Sketch2React Blog","description":"Articles, tutorials, tips &amp; tricks","publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sketch2react.io\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/sketch2react.io\/blog\/#organization","name":"Sketch2React Blog","url":"https:\/\/sketch2react.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","width":512,"height":512,"caption":"Sketch2React Blog"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/d452067d5528ce6cda4be87f136cf664","name":"Fredrik Ward","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/91605aba05531b0d98ed254dc314b74be1800d1086302db1454b4489c128e3e1?s=96&d=wavatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/91605aba05531b0d98ed254dc314b74be1800d1086302db1454b4489c128e3e1?s=96&d=wavatar&r=g","caption":"Fredrik Ward"},"url":"https:\/\/sketch2react.io\/blog\/author\/sewk9wxw3g\/"}]}},"_links":{"self":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/258","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/comments?post=258"}],"version-history":[{"count":6,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/258\/revisions"}],"predecessor-version":[{"id":575,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/258\/revisions\/575"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media\/261"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=258"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=258"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}