Add styled component rule (#1261)

* Add StyledComponent rule

* update doc

* update doc

* update doc

front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx

@@ -7,7 +7,7 @@ import { Radio } from '@/ui/input/radio/components/Radio';
 import { RadioGroup } from '@/ui/input/radio/components/RadioGroup';
 import { Modal } from '@/ui/modal/components/Modal';
 
-const Content = styled(Modal.Content)`
+const StyledContent = styled(Modal.Content)`
   align-items: center;
 `;
 
@@ -15,7 +15,7 @@ const StyledHeading = styled(Heading)`
   margin-bottom: ${({ theme }) => theme.spacing(8)};
 `;
 
-const RadioContainer = styled.div`
+const StyledRadioContainer = styled.div`
   display: flex;
   flex-direction: column;
   flex-grow: 1;
@@ -46,16 +46,16 @@ export const SelectSheetStep = ({
 
   return (
     <>
-      <Content>
+      <StyledContent>
         <StyledHeading title="Select the sheet to use" />
-        <RadioContainer>
+        <StyledRadioContainer>
           <RadioGroup onValueChange={(value) => setValue(value)} value={value}>
             {sheetNames.map((sheetName) => (
               <Radio value={sheetName} key={sheetName} />
             ))}
           </RadioGroup>
-        </RadioContainer>
-      </Content>
+        </StyledRadioContainer>
+      </StyledContent>
       <ContinueButton
         isLoading={isLoading}
         onContinue={() => handleOnContinue(value)}