https://learnreact.design/_next/static/chunks/pages/course-posts/p…any-styling-options-33f8cf67a7f32d01bede.js

1_N_E=(window.webpackJsonp_N_E=window.webpackJsonp_N_E||[]).push([[35],{"5vFA":function(e,a,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/course-posts/prototyping-react-framer/module2-toggle/2.4-too-many-styling-options",function(){return t("tdnf")}])},CjKd:function(e,a,t){"use strict";t.d(a,"a",(function(){return r}));t("q1tI");var n=t("9ixD"),c=t("soUV"),s=t("f4y1"),b=t("9qq+"),p=t("Tgqd"),o=t("qKvR"),r=function(e){var a=e.children,t=e.meta||{},r=t.title,l=t.description,i=t.video;return Object(o.c)(c.a,null,Object(o.c)(n.b,{title:r,description:l}),Object(o.c)(s.a,null,Object(o.c)("div",{className:"w-11/12 max-w-prose mx-auto space-y-10  "},Object(o.c)("div",{className:"my-10 flex flex-col justify-center items-center space-y-8 md:my-16 lg:max-w-2xl lg:my-24 xl:max-w-3xl  xl:my-36 "},Object(o.c)("h1",{className:"font-bold leading-tight text-center text-2xl sm:text-4xl xl:text-5xl "},r),Object(o.c)("div",{className:"flex space-x-2 text-sm"})),Object(o.c)(b.e,{href:i},Object(o.c)("a",{className:"flex space-x-2 items-center hover:text-green-600"},Object(o.c)(p.f,{className:"inline-block opacity-60",size:30}),Object(o.c)("div",null,"Watch the video course"))),a)))}},soUV:function(e,a,t){"use strict";t.d(a,"a",(function(){return r}));t("q1tI");var n=t("qKvR");function c(){return Object(n.c)("footer",{className:"bg-gray-900 text-white w-full py-12 mt-8"},Object(n.c)("div",{className:"max-w-max mx-auto md:ml-16"},"(c) LearnReact.design 2021"))}var s=t("jrVH"),b=t("9ixD"),p=t("29X9"),o=t("20a2");function r(e){var a=e.children,t=Object(o.useRouter)(),r=p.siteUrl+t.pathname;return Object(n.c)("div",{className:"min-h-screen flex flex-col"},Object(n.c)(b.b,{canonical:r,openGraph:{url:r}}),Object(n.c)(s.a,null),Object(n.c)("div",{className:"flex-1"},a),Object(n.c)(c,null))}},tdnf:function(e,a,t){"use strict";t.r(a),t.d(a,"meta",(function(){return p})),t.d(a,"default",(function(){return l}));var n=t("wx14"),c=t("Ff2n"),s=(t("q1tI"),t("7ljp")),b=t("CjKd"),p=(t("qKvR"),{tags:[],date:"2019-07-24",title:"2.4 Too Many Styling Options",video:"https://school.learnreact.design/courses/601139/lectures/10785659"}),o={meta:p},r=b.a;function l(e){var a=e.components,t=Object(c.a)(e,["components"]);return Object(s.b)(r,Object(n.a)({},o,t,{components:a,mdxType:"MDXLayout"}),Object(s.b)("h2",{id:"overview"},"Overview"),Object(s.b)("p",null,"What you'll learn:"),Object(s.b)("ul",null,Object(s.b)("li",{parentName:"ul"},"Differences between the ",Object(s.b)("inlineCode",{parentName:"li"},"style")," attribute and CSS rules"),Object(s.b)("li",{parentName:"ul"},Object(s.b)("inlineCode",{parentName:"li"},"<Frame>"),"'s convenient attributes (only works on ",Object(s.b)("inlineCode",{parentName:"li"},"<Frame>"),")"),Object(s.b)("li",{parentName:"ul"},"Using an external CSS file to style React code")),Object(s.b)("h2",{id:"styling-options"},"Styling Options"),Object(s.b)("h3",{id:"the-style-attribute-css-rules-and-frames-convenient-attributes"},"The ",Object(s.b)("inlineCode",{parentName:"h3"},"style")," attribute, CSS rules, and ",Object(s.b)("inlineCode",{parentName:"h3"},"<Frame>"),"'s convenient attributes"),Object(s.b)("p",null,"As we discussed previously, we can use this ",Object(s.b)("inlineCode",{parentName:"p"},"style")," attribute to set the inline style of an HTML element, such as a ",Object(s.b)("inlineCode",{parentName:"p"},"<div>"),", and the value of the ",Object(s.b)("inlineCode",{parentName:"p"},"style")," attribute must be an object."),Object(s.b)("pre",{className:"language-jsx"},Object(s.b)("code",Object(n.a)({parentName:"pre"},{className:"language-jsx"}),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token tag"}),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token tag"}),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token attr-name"}),"style"),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token script language-javascript"}),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token script-punctuation punctuation"}),"="),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"{"),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"{")," width",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),":")," ",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token number"}),"120"),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),",")," height",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),":")," ",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token number"}),"120"),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),",")," background",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),":")," ",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token string"}),"'orange'")," ",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"}"),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"}"))," ",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"/>")),"\n")),Object(s.b)("p",null,'What we can set here is very similar to CSS. Except that the format is different. For width and height, we can just put a number. It\u2019ll mean "px". If we want to use other units, we have to make a string.'),Object(s.b)("pre",{className:"language-jsx"},Object(s.b)("code",Object(n.a)({parentName:"pre"},{className:"language-jsx"}),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token tag"}),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token tag"}),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token attr-name"}),"style"),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token script language-javascript"}),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token script-punctuation punctuation"}),"="),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"{"),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"{")," width",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),":")," ",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token number"}),"20"),"em ",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"}"),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"}"))," ",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"/>")),"\n",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token comment"}),"//  error \u2934\ufe0e"),"\n")),Object(s.b)("p",null,"Because ",Object(s.b)("inlineCode",{parentName:"p"},"20em")," is technically not a valid number in JavaScript we get a ",Object(s.b)("inlineCode",{parentName:"p"},"SyntaxError"),". Therefore, we have to wrap the ",Object(s.b)("inlineCode",{parentName:"p"},"20em")," with quotes to make a string ",Object(s.b)("inlineCode",{parentName:"p"},'"20em"'),"."),Object(s.b)("pre",{className:"language-jsx"},Object(s.b)("code",Object(n.a)({parentName:"pre"},{className:"language-jsx"}),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token tag"}),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token tag"}),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token attr-name"}),"style"),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token script language-javascript"}),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token script-punctuation punctuation"}),"="),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"{"),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"{")," width",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),":")," ",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token string"}),"'20em'")," ",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"}"),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"}"))," ",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"/>")),"\n")),Object(s.b)("p",null,"If we convert this object to its corresponding CSS, it\u2019ll be"),Object(s.b)("pre",{className:"language-css"},Object(s.b)("code",Object(n.a)({parentName:"pre"},{className:"language-css"}),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token property"}),"width"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),":")," ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token number"}),"20"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token unit"}),"em"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),";"),"\n",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token property"}),"height"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),":")," ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token number"}),"120"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token unit"}),"px"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),";"),"\n",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token property"}),"background"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),":")," orange",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),";"),"\n")),Object(s.b)("p",null,"If a property has multiple words, such as"),Object(s.b)("pre",{className:"language-css"},Object(s.b)("code",Object(n.a)({parentName:"pre"},{className:"language-css"}),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token property"}),"border-radius"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),":")," ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token number"}),"30"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token unit"}),"px"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),";"),"\n")),Object(s.b)("p",null,"we can't directly use it in JSX. We'll get an error."),Object(s.b)("pre",{className:"language-jsx"},Object(s.b)("code",Object(n.a)({parentName:"pre"},{className:"language-jsx"}),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token tag"}),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token tag"}),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token attr-name"}),"style"),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token script language-javascript"}),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token script-punctuation punctuation"}),"="),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"{"),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"{")," border",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token operator"}

1),"-"),"radius",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),":")," ",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token number"}),"30")," ",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"}"),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"}"))," ",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"/>")),"\n         ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token comment"}),"//  error \u2934\ufe0e"),"\n")),Object(s.b)("p",null,"This is because the dash between ",Object(s.b)("inlineCode",{parentName:"p"},"border")," and ",Object(s.b)("inlineCode",{parentName:"p"},"radius")," is not a valid name for a JavaScript object key. This is why we use ",Object(s.b)("strong",{parentName:"p"},"Camel Case"),"!"),Object(s.b)("pre",{className:"language-jsx"},Object(s.b)("code",Object(n.a)({parentName:"pre"},{className:"language-jsx"}),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token tag"}),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token tag"}),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token attr-name"}),"style"),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token script language-javascript"}),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token script-punctuation punctuation"}),"="),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"{"),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"{")," borderRadius",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),":")," ",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token number"}),"30")," ",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"}"),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"}"))," ",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"/>")),"\n")),Object(s.b)("p",null,"Under the hood, all the properties in this object get converted into CSS rules, but since we are writing JavaScript code instead of CSS, we have to follow the rules of JavaScript."),Object(s.b)("p",null,"If a value is not a number, we have to add quotes around it to make it a string such as"),Object(s.b)("pre",{className:"language-jsx"},Object(s.b)("code",Object(n.a)({parentName:"pre"},{className:"language-jsx"}),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token tag"}),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token tag"}),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token attr-name"}),"style"),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token script language-javascript"}),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token script-punctuation punctuation"}),"="),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"{"),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"{")," width",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),":")," ",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token string"}),"'20em'"),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),",")," height",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),":")," ",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token string"}),"'10em'"),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),",")," background",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),":")," ",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token string"}),"'orange'")," ",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"}"),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"}"))," ",Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token punctuation"}),"/>")),"\n")),Object(s.b)("p",null,"Alright, as a reminder, we have seen two ways to style a Frame."),Object(s.b)("ol",null,Object(s.b)("li",{parentName:"ol"},Object(s.b)("p",{parentName:"li"},"The ",Object(s.b)("inlineCode",{parentName:"p"},"style")," attribute")),Object(s.b)("li",{parentName:"ol"},Object(s.b)("p",{parentName:"li"},"Convenient attributes such as ",Object(s.b)("inlineCode",{parentName:"p"},"width"),", ",Object(s.b)("inlineCode",{parentName:"p"},"height")," and ",Object(s.b)("inlineCode",{parentName:"p"},"borderRadius"),"."),Object(s.b)("blockquote",{parentName:"li"},Object(s.b)("p",{parentName:"blockquote"},"These attributes work behind the scenes. Frame converts them into a style attribute internally and merges them with any previously set attributes on the style tag. All of these attributes are then are converted to CSS.")),Object(s.b)("p",{parentName:"li"},Object(s.b)("img",Object(n.a)({parentName:"p"},{src:"./underthehood.png",alt:"arrow diagram of Frame attributes"}))))),Object(s.b)("p",null,"Both, however, set the inline style of the resulting div."),Object(s.b)("p",null,"Eventually, the style attribute gets converted into CSS."),Object(s.b)("h3",{id:"style-react-code-with-an-external-css-file"},"Style React code with an external CSS file"),Object(s.b)("p",null,"Not to confuse you, but there\u2019s a third way to style things in React code."),Object(s.b)("p",null,"The ",Object(s.b)("inlineCode",{parentName:"p"},"className")," on the div is equivalent to ",Object(s.b)("inlineCode",{parentName:"p"},"class")," in HTML. As a result, we can reference that in the ",Object(s.b)("inlineCode",{parentName:"p"},"styles.css")," file which is imported near the top of the js file."),Object(s.b)("img",{src:"/_next/static/media/css.2464b836dbd1380f73ae56b92d524718.png",alt:"code",width:476,height:235}),Object(s.b)("p",null,"We can edit the ",Object(s.b)("inlineCode",{parentName:"p"},"styles.css"),' file to style the div here by going to the file system on the left and clicking on "styles.css".'),Object(s.b)("img",{src:"/_next/static/media/stylescss.63715e6fb62ed051a8fa81bd10a709f0.png",alt:"css code",width:611,height:231}),Object(s.b)("p",null,"If we want to change the background color, we first have to remove ",Object(s.b)("inlineCode",{parentName:"p"},'background: "orange"')," from the ",Object(s.b)("inlineCode",{parentName:"p"},"style")," attribute in our JavaScript file."),Object(s.b)("p",null,"Then in our CSS file"),Object(s.b)("pre",{className:"language-css"},Object(s.b)("code",Object(n.a)({parentName:"pre"},{className:"language-css"}),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token selector"}),Object(s.b)("span",Object(n.a)({parentName:"span"},{className:"token class"}),".App"))," ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"{"),"\n  ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token property"}),"font-family"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),":")," sans-serif",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),";"),"\n  ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token property"}),"text-align"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),":")," center",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),";"),"\n  ",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token property"}),"background"),Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),":")," palegreen",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),";"),"\n",Object(s.b)("span",Object(n.a)({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),Object(s.b)("p",null,"Since we are now writing real CSS, we must follow CSS format."),Object(s.b)("p",null,"Unlike JavaScript, we don\u2019t quote colors, and we need to add a semicolon after each rule."),Object(s.b)("h3",{id:"tips"},"Tips"),Object(s.b)("p",null,"I know this can be error-prone if we have to switch back and forth between different ways of writing the style. Make sure to check the extensions of your files! If it\u2019s CSS, we\u2019ll use CSS format. If it\u2019s JS or TSX as we'll later use, we are writing JavaScript code, we are gonna need to use camel case, quote str

1ings, and so on."),Object(s.b)("h2",{id:"conclusion"},"Conclusion"),Object(s.b)("p",null,"Remember that CSS is the final destination. The style attribute will be eventually converted into CSS. The attributes on Frames such as ",Object(s.b)("inlineCode",{parentName:"p"},"width"),", ",Object(s.b)("inlineCode",{parentName:"p"},"height"),", and ",Object(s.b)("inlineCode",{parentName:"p"},"borderRadius")," are just shortcuts to set the ",Object(s.b)("inlineCode",{parentName:"p"},"style")," attribute. Moreover, these shortcuts only work for ",Object(s.b)("strong",{parentName:"p"},"Framer specific tags"),"."),Object(s.b)("p",null,"In the next post, we'll learn about functions!"))}l.isMDXComponent=!0}},[["5vFA",1,2,0,3,4,5]]]);