рдЕрд░реЗ,
рдореИрдВ рд╡реЗрдм рд░рд┐рдПрдХреНрдЯ рдРрдк рдореЗрдВ рд╕реНрдЯреЛрд░реАрдмреБрдХ (рдЗрдВрдлреЛ рдРрдбрдСрди рдХреЗ рд╕рд╛рде) рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реВрдВред рдЙрд╕реА рдПрдкреНрд▓рд┐рдХреЗрд╢рди рдкрд░ рдореИрдВ рд╕реНрдЯрд╛рдЗрд▓ рдШрдЯрдХреЛрдВ (https://www.styled-computers.com/) рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реВрдВред
рдпрд╣рд╛рдБ рд╕рд░рд▓ рдорд╛рдорд▓рд╛ рд╣реИ рдХрд┐ рдореИрдВ рдпрд╣ рдХреИрд╕реЗ рдХрд░ рд░рд╣рд╛ рд╣реВрдБ:
__LayoutHeader.js__
import styled from 'styled-components';
const LayoutHeader = styled.div`
color: #fff;
background-color: #000;
`;
export default LayoutHeader;
__LayoutHeader.story.js__
import { storiesOf } from '@storybook/react';
import React from 'react';
import LayoutHeader from './LayoutHeader';
storiesOf('LayoutHeader', module)
.addWithInfo('with text', () => (
<LayoutHeader>Simple text</LayoutHeader>
));
рд╕рдорд╕реНрдпрд╛ рдпрд╣ рд╣реИ рдХрд┐ рд╕реНрдЯреЛрд░реАрдмреБрдХ рдЗрдВрдлреЛ рдЖрдЙрдЯрдкреБрдЯ рдЗрд╕ рддрд░рд╣ рджрд┐рдЦрддрд╛ рд╣реИ:
рдореИрдВ рдХрд┐рд╕реА рднреА рддрд░рд╣ рдХрд╣рд╛рдиреА рд╕рдВрд╕рд╛рдзрд┐рдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рддреЛ рдпрд╣ рдХреЗ рд░реВрдк рдореЗрдВ рдХрд╣рд╛рдиреА рдХреА рд╕рд╛рдордЧреНрд░реА renders <LayoutHeader />
рдХреЗ рдмрдЬрд╛рдп <styled.div />
?
рдореБрдЭреЗ рдХреНрд╖рдорд╛ рдХрд░реЗрдВ, рдореЗрд░рд╛ рдкреНрд░рд╢реНрди рдмрд╣реБрдд рдЬрд▓реНрджрдмрд╛рдЬреА рдореЗрдВ рдерд╛ред
рд╕рдорд╛рдзрд╛рди рд╣реИ:
__LayoutHeader.js__
import styled from 'styled-components';
const LayoutHeader = styled.div`
color: #fff;
background-color: #000;
`;
LayoutHeader.displayName = 'LayoutHeader';
export default LayoutHeader;
@michaltaberski рдЕрдкрдиреЗ рдорд╛рдорд▓реЗ рдХреЛ рд╕рд╛рдЭрд╛ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж!
рд╢рд╛рдпрдж рдпрд╣ рдХрд┐рд╕реА рдХреЗ рд▓рд┐рдП рдЙрдкрдпреЛрдЧреА рд╣реЛрдЧрд╛!
рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рд╣рдо рдЗрд╕реЗ рдмрдВрдж рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред
рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА
рдореБрдЭреЗ рдХреНрд╖рдорд╛ рдХрд░реЗрдВ, рдореЗрд░рд╛ рдкреНрд░рд╢реНрди рдмрд╣реБрдд рдЬрд▓реНрджрдмрд╛рдЬреА рдореЗрдВ рдерд╛ред
рд╕рдорд╛рдзрд╛рди рд╣реИ:
__LayoutHeader.js__