🔹MCQs of Class 13
CSS in React
1.
Which
attribute is used in React to apply inline styles?
a) class
b) style
c) css
d) inline
Answer:
b) style
2.
How
are inline styles passed in React?
a) As a string
b) As an object
c) As a function
d) As a CSS file
Answer:
b) As an object
3.
What
is the correct syntax for setting font size to 16px using inline styles in
React?
a) {font-size: 16px}
b) {fontSize: "16px"}
c) {font_size: 16px}
d) "fontSize: 16px"
Answer:
b) {fontSize: "16px"}
4.
Which
of these is true about inline styles in React?
a) They support CSS pseudo-classes like :hover
b) They use camelCase property names
c) They can be used in external CSS files
d) They require separate files
Answer:
b) They use camelCase property names
5.
How
do you apply an external CSS file to a React component?
a) import './styles.css';
b) <link rel="stylesheet" href="styles.css">
c) Use inline styles only
d) Write CSS inside JSX
Answer:
a) import './styles.css';
6.
Which
statement is true about external CSS in React?
a) Styles are scoped locally by default
b) Styles are applied globally unless scoped manually
c) Inline styles override external CSS
d) External CSS cannot style React components
Answer:
b) Styles are applied globally unless scoped manually
7.
What
does CSS Modules provide in React?
a) Global styles
b) Inline styles
c) Scoped and modular CSS
d) Styling with JavaScript only
Answer:
c) Scoped and modular CSS
8.
How
do you import a CSS Module file named Button.module.css in React?
a) import './Button.module.css';
b) import styles from './Button.module.css';
c) <link href="Button.module.css" />
d) import { Button } from './Button.module.css';
Answer:
b) import styles from './Button.module.css';
9.
In
CSS Modules, how do you apply a class named btn to a button element?
a) <button className="btn">
b) <button className={styles.btn}>
c) <button style={styles.btn}>
d) <button css="btn">
Answer:
b) <button className={styles.btn}>
10.
Which
of the following is NOT a correct way to style a React component?
a) Inline styles
b) External CSS
c) CSS Modules
d) HTML <style> tags inside JSX
Answer:
d) HTML <style> tags inside JSX
11.
How
are CSS properties written in React inline styles?
a) Lowercase with hyphens
b) CamelCase
c) Uppercase
d) With underscores
Answer:
b) CamelCase
12.
Which
React style approach helps avoid class name conflicts?
a) Inline styles
b) External CSS
c) CSS Modules
d) Global CSS
Answer:
c) CSS Modules
13.
Which
of the following inline style objects is correct?
const style = {
backgroundColor: 'blue',
fontSize: '20px',
marginTop: '10px'
};
a)
Correct
b) Incorrect
Answer: a) Correct
14.
How
can you dynamically change an inline style based on a React prop?
a) By editing the CSS file
b) Using JavaScript inside the style object
c) Using only external CSS
d) By using className only
Answer:
b) Using JavaScript inside the style object
15.
Which
is a disadvantage of using inline styles?
a) Styles cannot be changed dynamically
b) No support for media queries or pseudo-classes
c) Inline styles override all other styles
d) Inline styles support all CSS features
Answer:
b) No support for media queries or pseudo-classes
16.
How
do you add a hover effect in React using external CSS?
a) Use inline styles with :hover
b) Write a hover selector in the CSS file
c) Use JavaScript to detect mouse hover
d) Inline styles support hover automatically
Answer:
b) Write a hover selector in the CSS file
17.
What
file extension is commonly used for CSS Modules?
a) .css
b) .module.css
c) .scss
d) .jsx
Answer:
b) .module.css
18.
If
two styles conflict, which has the highest priority in React?
a) External CSS
b) CSS Modules
c) Inline styles
d) Browser default styles
Answer:
c) Inline styles
19.
Which
method would you use to style components with isolated styles to prevent
leakage?
a) Inline styles
b) External CSS
c) CSS Modules
d) CSS Reset
Answer:
c) CSS Modules
20.
Can
you import multiple external CSS files in a single React component?
a) No
b) Yes
c) Only one CSS file allowed
d) Only CSS Modules allowed
Answer:
b) Yes
21.
How
is a CSS class applied to a JSX element?
a) class="classname"
b) className="classname"
c) css="classname"
d) style="classname"
Answer:
b) className="classname"
22.
Which
of the following will NOT work in inline styles?
a) color: 'red'
b) fontWeight: 'bold'
c) :hover pseudo-class
d) marginTop: '10px'
Answer:
c) :hover pseudo-class
23.
What
happens if you use the same class name in multiple CSS Modules?
a) They override each other globally
b) They are scoped locally and won't conflict
c) It throws an error
d) Only the first one is applied
Answer:
b) They are scoped locally and won't conflict
24.
Which
is the correct way to write the style for setting background color to red in
inline styles?
a) { background-color: 'red' }
b) { backgroundColor: 'red' }
c) { backgroundcolor: 'red' }
d) { BackgroundColor: 'red' }
Answer:
b) { backgroundColor: 'red' }
25.
To
add styles to multiple elements using CSS Modules, you should:
a)
Use the same class name in the CSS Module
b) Use different class names and assign them individually
c) Use inline styles only
d) Use global CSS
Answer: b) Use different class names and
assign them individually
26.
Which
React feature allows using CSS files that only apply to a specific component?
a) Styled-components
b) Inline styles
c) CSS Modules
d) Global CSS
Answer:
c) CSS Modules
27.
When
using CSS Modules, how is the class name applied in JSX?
a) className="btn"
b) className={styles.btn}
c) style={styles.btn}
d) className={{btn}}
Answer:
b) className={styles.btn}
28.
Which
of the following CSS features cannot be implemented using inline styles?
a) Font size
b) Media queries
c) Background color
d) Padding
Answer:
b) Media queries
29.
How
do you apply multiple CSS classes in React using CSS Modules?
a) className={styles.class1 + " " + styles.class2}
b) className="class1 class2"
c) className={[styles.class1, styles.class2]}
d) className={styles.class1 & styles.class2}
Answer:
a) className={styles.class1 + " " + styles.class2}
30.
Which
of the following is a benefit of using CSS Modules?
a) Styles are automatically global
b) They prevent naming collisions
c) They only work with inline styles
d) They require no import
Answer:
b) They prevent naming collisions
31.
Which
React method is the best for dynamic style changes based on state?
a) External CSS only
b) Inline styles or CSS Modules with conditional class names
c) HTML <style> tags
d) Global CSS overrides
Answer:
b) Inline styles or CSS Modules with conditional class names
32.
Which
file needs to be created to use CSS Modules?
a) .css
b) .module.css
c) .js
d) .jsx
Answer:
b) .module.css
33.
In
React, the correct syntax to add multiple inline styles is:
a) style={{color: 'red', fontSize: '16px'}}
b) style="color: red; font-size: 16px"
c) style="color: 'red', fontSize: '16px'"
d) style={{'color', 'red'}, {'fontSize', '16px'}}
Answer:
a) style={{color: 'red', fontSize: '16px'}}
34.
What
is the difference between external CSS and CSS Modules?
a) External CSS is scoped globally; CSS Modules are scoped locally
b) External CSS uses JavaScript; CSS Modules do not
c) External CSS is faster
d) No difference
Answer:
a) External CSS is scoped globally; CSS Modules are scoped locally
35.
Which
React prop is used for styling components?
a) class
b) style
c) css
d) styles
Answer:
b) style
36.
How
do you write the background-color property in React inline styles?
a) background-color
b) backgroundColor
c) background_color
d) BackgroundColor
Answer:
b) backgroundColor
37.
Can
you use media queries inside inline styles in React?
a) Yes
b) No
c) Only with JavaScript libraries
d) Sometimes
Answer:
b) No
38.
Which
CSS feature requires external CSS or CSS Modules to implement?
a) Setting color
b) Hover effects
c) Padding
d) Font size
Answer:
b) Hover effects
39.
Which
of these can be a disadvantage of CSS Modules?
a) Global CSS leakage
b) Increased setup complexity
c) No scoping
d) No support for CSS features
Answer:
b) Increased setup complexity
40.
If
you want to change styles based on a prop in CSS Modules, what approach do you
use?
a) Inline styles only
b) Conditional class names in JSX
c) External CSS with variables
d) Global CSS only
Answer:
b) Conditional class names in JSX
41.
What
is the correct way to write inline styles for a margin of 10 pixels?
a) margin: 10px
b) { margin: 10 }
c) { margin: '10px' }
d) margin = "10px"
Answer:
c) { margin: '10px' }
42.
Which
of the following is the correct way to import an external CSS file named App.css
in React?
a) import './App.css';
b) <link rel="stylesheet" href="App.css">
c) require('App.css');
d) @import './App.css';
Answer:
a) import './App.css';
43.
Can
you use CSS Modules with Sass or SCSS?
a) Yes
b) No
c) Only SCSS
d) Only Sass
Answer:
a) Yes
44.
In
CSS Modules, how do you avoid naming conflicts?
a) By using unique class names globally
b) Classes are locally scoped by default
c) Avoid using CSS Modules
d) Use inline styles only
Answer:
b) Classes are locally scoped by default
