diff --git a/packages/pigment-react/tests/styled/fixtures/styled.input.js b/packages/pigment-react/tests/styled/fixtures/styled.input.js
index 95e6314e82d896..92126ff9efa283 100644
--- a/packages/pigment-react/tests/styled/fixtures/styled.input.js
+++ b/packages/pigment-react/tests/styled/fixtures/styled.input.js
@@ -1,14 +1,34 @@
-import { styled } from '@pigment-css/react';
+import { styled, keyframes } from '@pigment-css/react';
 
-const Rail = styled('span')`
+const rotateKeyframe = keyframes({
+  from: {
+    transform: 'rotate(360deg)',
+  },
+  to: {
+    transform: 'rotate(0deg)',
+  },
+});
+
+const Component = styled.div(({ theme }) => ({
+  color: '#ff5252',
+  animation: `${rotateKeyframe} 2s ease-out 0s infinite`,
+}));
+
+export const SliderRail = styled('span', {
+  name: 'MuiSlider',
+  slot: 'Rail',
+})`
   display: block;
+  position: absolute;
+  border-radius: inherit;
+  background-color: currentColor;
   opacity: 0.38;
 `;
 
-const Slider = styled('div')`
+const SliderRail2 = styled.span`
   display: block;
-  opacity: 0.32;
-  ${Rail} {
+  opacity: 0.38;
+  ${SliderRail} {
     display: none;
   }
 `;
diff --git a/packages/pigment-react/tests/styled/fixtures/styled.output.css b/packages/pigment-react/tests/styled/fixtures/styled.output.css
index a3e3371a396453..b850fd89d5a61d 100644
--- a/packages/pigment-react/tests/styled/fixtures/styled.output.css
+++ b/packages/pigment-react/tests/styled/fixtures/styled.output.css
@@ -10,20 +10,17 @@
   color: #ff5252;
   animation: r1419f2q 2s ease-out 0s infinite;
 }
-.c1sjy0ja {
-  color: red;
-}
-.c1sjy0ja:has(.foo) {
-  color: blue;
-}
-.s6hrafw {
+.s1sjy0ja {
   display: block;
+  position: absolute;
+  border-radius: inherit;
+  background-color: currentColor;
   opacity: 0.38;
 }
-.s1nn157y {
+.s6hrafw {
   display: block;
   opacity: 0.38;
 }
-.s1nn157y .s6hrafw {
+.s6hrafw .s1sjy0ja {
   display: none;
 }
diff --git a/packages/pigment-react/tests/styled/fixtures/styled.output.js b/packages/pigment-react/tests/styled/fixtures/styled.output.js
index d1e9ac614e8f3d..881dc90513f5e2 100644
--- a/packages/pigment-react/tests/styled/fixtures/styled.output.js
+++ b/packages/pigment-react/tests/styled/fixtures/styled.output.js
@@ -1,4 +1,3 @@
-import { styled as _styled4 } from '@pigment-css/react';
 import { styled as _styled3 } from '@pigment-css/react';
 import { styled as _styled2 } from '@pigment-css/react';
 import { styled as _styled } from '@pigment-css/react';
@@ -6,9 +5,12 @@ import _theme from '@pigment-css/react/theme';
 const Component = /*#__PURE__*/ _styled('div')({
   classes: ['c1vtarpi'],
 });
-const Component2 = /*#__PURE__*/ _styled2('div')({
-  classes: ['c1sjy0ja'],
+export const SliderRail = /*#__PURE__*/ _styled2('span', {
+  name: 'MuiSlider',
+  slot: 'Rail',
+})({
+  classes: ['s1sjy0ja'],
 });
-const SliderRail2 = /*#__PURE__*/ _styled4('span')({
-  classes: ['s1nn157y'],
+const SliderRail2 = /*#__PURE__*/ _styled3('span')({
+  classes: ['s6hrafw'],
 });