style
إلى كائن جافا سكريبت. أولاً ، تستخدم أسماء بعض خصائص أنماط CSS حالة الجمل. على سبيل المثال ، تعيين التحدي الأخير حجم الخط مع fontSize
بدلاً من font-size
. الكلمات الواصلة مثل font-size
هي بنية غير صالحة لخصائص كائن جافا سكريبت ، لذا يستخدم React حالة الجمل. وكقاعدة عامة ، تتم كتابة أي خصائص نمط متصل باستخدام حالة الجمل في JSX. من المفترض أن تكون جميع وحدات قيمة قيمة الخاصية (مثل height
width
fontSize
) في px
ما لم يتم تحديد خلاف ذلك. إذا كنت تريد استخدام em
، على سبيل المثال ، يمكنك التفاف القيمة والوحدات بين علامات اقتباس ، مثل {fontSize: "4em"}
. بخلاف قيم الطول الافتراضية إلى px
، يجب أن يتم التفاف جميع قيم الخصائص الأخرى بين علامتي اقتباس. object
نمط على ثابت للحفاظ على تنظيم التعليمات البرمجية الخاصة بك. uncomment في styles
الثابتة وتعلن عن object
له ثلاث خصائص النمط والقيم الخاصة بهم. إعطاء div
لون "purple"
، حجم خط من 40
، وحدود من "2px solid purple"
. ثم قم بتعيين سمة style
تساوي ثابت styles
. styles
object
له ثلاث خصائص.
testString: 'assert(Object.keys(styles).length === 3, "The styles
variable should be an object
with three properties.");'
- text: يجب أن يكون لمتغير styles
خاصية color
معين بقيمة purple
.
testString: 'assert(styles.color === "purple", "The styles
variable should have a color
property set to a value of purple
.");'
- text: ''
testString: 'assert(styles.fontSize === 40, "The styles
variable should have a fontSize
property set to a value of 40
.");'
- text: ''
testString: 'assert(styles.border === "2px solid purple", "The styles
variable should have a border
property set to a value of 2px solid purple
.");'
- text: ''
testString: 'assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return mockedComponent.type() === "div"; })(), "The component should render a div
element.");'
- text: ''
testString: 'assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return (mockedComponent.props().style.color === "purple" && mockedComponent.props().style.fontSize === 40 && mockedComponent.props().style.border === "2px solid purple"); })(), "The div
element should have its styles defined by the styles
object.");'
```