diff --git a/packages/ui-toolkit/src/override.js b/packages/ui-toolkit/src/override.js
index f96de8893b2c8a7c08c4516d8a86cfe038d93850..f3b0bd2cc14f1d38e6af9684dc2094f2d012ecd0 100644
--- a/packages/ui-toolkit/src/override.js
+++ b/packages/ui-toolkit/src/override.js
@@ -42,18 +42,22 @@ const override = (name, overrideKey = 'cssOverrides') => props => {
   // ui.Button is not there.
   if (!target) return null
 
+  // css`` functions from styled components come in as arrays
+  const isStyledCss = Array.isArray(target)
+  const hasRoot = has(target, 'Root')
+
   /*
     ui.Button is there, but there is no ui.Button.Root or ui.Button: css``.
 
-    This also covers the case where you only target children of the component.
-    eg. if your override looks like ui.Button = { Icon: css`` }
+    This also covers the case where you only target children of the component,
+    eg. if your override looks like ui.Button = { Icon: css`` }.
     In this case, there would be no overrides for ui.Button, but only for
     ui.Button.Icon, which would have its own override.
   */
-  if (!target.entries) return null
+  if (!isStyledCss && !hasRoot) return null
 
   // ui.Button.Root exists
-  if (has(target, 'Root')) {
+  if (hasRoot) {
     return css`
       ${th(`${overrideKey}.${name}.Root`)};
     `