{"record":{"id":"521968cdd546182a","repo":"reflex-dev/reflex","slug":"do-not-override-add-style-directly-use-add-style","errorCode":null,"errorMessage":"Do not override _add_style directly. Use add_style instead.","messagePattern":"Do not override _add_style directly\\. Use add_style instead\\.","errorType":"exception","errorClass":"UserWarning","httpStatus":null,"severity":"critical","filePath":"packages/reflex-base/src/reflex_base/components/component.py","lineNumber":1436,"sourceCode":"        1. Default style from `_add_style`/`add_style`.\n        2. User-defined style from `App.style`.\n        3. User-defined style from `Component.style`.\n        4. style dict and css props passed to the component instance.\n\n        Args:\n            style: A dict from component to styling.\n            theme: The theme to apply. (for retro-compatibility with deprecated _apply_theme API)\n\n        Returns:\n            The component with the additional style.\n\n        Raises:\n            UserWarning: If `_add_style` has been overridden.\n        \"\"\"\n        # 1. Default style from `_add_style`/`add_style`.\n        if type(self)._add_style != Component._add_style:\n            msg = \"Do not override _add_style directly. Use add_style instead.\"\n            raise UserWarning(msg)\n        new_style = self._add_style()\n        style_vars = [new_style._var_data]\n\n        # 2. User-defined style from `App.style`.\n        component_style = self._get_component_style(style)\n        if component_style:\n            new_style.update(component_style)\n            style_vars.append(component_style._var_data)\n\n        # 4. style dict and css props passed to the component instance.\n        new_style.update(self.style)\n        style_vars.append(self.style._var_data)\n\n        new_style._var_data = VarData.merge(*style_vars)\n\n        # Assign the new style\n        self.style = new_style\n        self._clear_compile_caches()","sourceCodeStart":1418,"sourceCodeEnd":1454,"githubUrl":"https://github.com/reflex-dev/reflex/blob/45b8ed5ab735f8a56bbb09a42384f030eb0208e7/packages/reflex-base/src/reflex_base/components/component.py#L1418-L1454","documentation":"The cache-based sibling lookup resolves the substate by full name and verifies isinstance against the requested class; mismatch raises StateMismatchError. A state with the same dotted path but different class identity exists in the tree.","triggerScenarios":"Two different classes sharing get_full_name() in one process (duplicate class definitions, module re-imports under different names), so root_state.get_substate returns the wrong class.","commonSituations":"Defining the same State class in two modules or re-importing an app module under a different path (double-import); hot-reload artifacts creating duplicate class objects.","solutions":["Ensure each state class is defined exactly once and imported from a single canonical module","Fix sys.path/duplicate module aliases that cause double imports","Restart the dev server / clear stale modules after moving state definitions"],"exampleFix":null,"handlingStrategy":"try-catch","validationCode":null,"typeGuard":null,"tryCatchPattern":"try:\n    sub = root.get_substate(path)\nexcept StateMismatchError:\n    ...","preventionTips":["Import state modules from one canonical path","Avoid double imports / duplicated module roots"],"tags":["reflex","state","cache","class-identity"],"backgroundTag":"deserialized-type-mismatch","analyzedSha":"45b8ed5ab735f8a56bbb09a42384f030eb0208e7","analyzedAt":"2026-08-28T19:25:27.644Z","schemaVersion":2},"datasetVersion":"2026-08-28T21:17:43.275Z"}