Using Material UI Components CBA Practice Questions (Page 1)

Questions 1–5

1. 1application · medium

   A developer is building a plugin page that displays a set of metrics. On large screens, the metrics should appear in a 4-column grid. On medium screens, 2 columns. On small screens, 1 column. Which set of Grid item props achieves this?

   • Axs={12} sm={4} md={6}
   • Bxs={3} sm={6} md={12}
   • Cxs={12} sm={6} md={3}
   • Dxs={6} sm={12} md={4}
   Reveal Solution Discussion Select an answer first
2. 2application · medium

   A Backstage admin wants to add a dark mode toggle to their portal. They have already created a custom light theme. What is the minimal set of steps to support dark mode for all MUI components?

   • AUse the useMediaQuery hook to detect the system's color scheme and apply a CSS filter to invert the entire page.
   • BUse the ThemeProvider's 'mode' prop to switch between light and dark without creating a new theme.
   • COverride the --background-color CSS variable in the global stylesheet based on a class on the body element.
   • DCreate a second theme with palette.mode='dark', and conditionally pass either the light or dark theme to the ThemeProvider based on user preference.
   Reveal Solution Discussion Select an answer first
4. 3application · medium

   A developer wants to add a custom font family to their Backstage instance. They have loaded the font via a link tag in the index.html. What is the correct way to make Material UI components use this font?

   • AUse makeStyles to set the font family on each component individually.
   • BAdd a CSS rule to the global stylesheet setting body { font-family: 'MyFont' }.
   • CUse the sx prop on the root component to set fontFamily: 'MyFont'.
   • DSet the typography.fontFamily property in the custom theme passed to the ThemeProvider.
   Reveal Solution Discussion Select an answer first
5. 4foundation · easy

   In Material UI, what do the breakpoint values such as 'sm', 'md', and 'lg' represent?

   • AScreen width thresholds at which the layout changes
   • BThe number of columns in a grid
   • CThe font size scale for typography
   • DThe spacing unit for margins and padding
   Reveal Solution Discussion Select an answer first
6. 5application · medium

   A developer is adding a dialog to confirm a destructive action in a Backstage plugin. They want the dialog to use the same styling as other dialogs in Backstage. What is the best way to implement this?

   • AUse Material UI's Popover component, as it is similar to a dialog.
   • BUse a custom modal built with a div and CSS to match the design.
   • CUse Material UI's Dialog component directly and manually style it with the sx prop.
   • DUse Backstage's Dialog component from '@backstage/core-components'.
   Reveal Solution Discussion Select an answer first